前端自动保存功能？

Question

产品提出了一个新需求但是实现没有思路 即：
页面内容自动保存功能，即使意外退出页面，下次进入也可自动填充上次退出前填写的内容
有没有大佬可以解答一下~

Answer 1

表单数据存入一个总的变量如formData中，深度监听formData，有改变就存入本地localStorage中，每次页面初始化的时候formData默认值都从localStorage中获取

Answer 2

之前写了一次我的思路是这样的：

1. 启动一个定时器，每隔15秒保存一次到 localStorage 当中。
2. 每次打开自动从 localStorage 获取一下保存的数据，如果有保存则全部回填进去
3. 发现提交之后保存的数据没有清空，在提交请求完成之后使用 removeItem 移除了保存数据。
4. 发现保存太频繁了，所以给自动保存函数加了一个 debounce 去监听表单数据的改变，每次改变数据后触发一次自动保存函数。
5. 发现一直输入的话，就不会自动保存了，所以给 debounce 增加了一个最大等待时间，拆过1分钟后就会强制保存。
6. 发现可能会出现停止输入的15秒之内不小心关闭了弹窗或者浏览器，所以在组件销毁时直接执行自动保存函数保存到 localStorage 当中。

Answer 3

表单数据变化时存到localStorage里面，下次进入再从localStorage取出来
如果你用的vue 和 pinia可以直接使用插件
https://prazdevs.github.io/pi...
Vuex数据持久化存储 vuex-persistedstate vuex-persist
https://juejin.cn/post/691868...

Answer 4

设个定时器，每隔多少时间，把内容存到本地的IndexedDB里