如果浏览器被意外关闭,react怎么缓存用户填写的表单?

王兰花
  • 870

这是一个面试题:

在浏览器崩溃,断电,或手动关闭时,怎么缓存已经输入的不完整的表单,使页面重新加载后可以恢复已输入的数据呢?
考虑用 react 实现,这个问题的关注点在代码/逻辑的实现层面,暂时不考虑用户提示的问题

Q1:react 并没有 keep-alive 的东西吧?
Q2:redux 对浏览器级别的缓存好像也没啥作用,我回答了监听页面关闭,把数据存储在 localStorage 中,除此之外还有其他方案吗?
Q3:这种浏览器级的缓存有什么应用场景?
(以我浅薄的经验看,似乎没在项目中出现过这种需求)


根据 @_usw 的提示,我看了下思否的实现方式:

对于旧问题的编辑:它是在输入的表单(比如发布问题)做了个防抖,右上角有一个保存中...,定时提交已编辑的内容到远程,保存中变为已存草稿,如果页面或者浏览器被关闭,并不能恢复已经编辑的内容

对于新问题的编辑:同上,另外还同步更新了localStorage,浏览器被关闭后恢复也是拿的 localStorage 的数据

我试了下删除localStorage并刷新/关闭页面/关闭浏览器,之后页面重载,以上二者都没有获取草稿的相关请求(真是令人疑惑)

回复
阅读 1k
3 个回答

注册window.onunload事件,把内容缓存到本地,页面加载时读一下缓存看看有没有内容

如果真的是浏览器崩溃、断点等意外情况,感觉是需要提前将数据进行缓存的,用户每填一部分数据就进行缓存。

黑暗的光明
  • 993

我记得react没有这种东西,要实现也只是组件主动设置浏览器本地缓存而已。
还能有啥,localStorage之外常见的就是存cookie,或者session

最直接的思路就是input组件自动持久化,表单容器组件有一个全局唯一ID的属性和是否自动保存属性,input组件都放之于表单容器组件内部,然后此表单的所有input组件都会以此ID为key,在适当的时机自动保存和恢复输入框中的数据,若打开了自动保存,表单容器组件会有个实时数据状态栏,正在保存表单数据,已恢复表单的数据,再就是如果是已登录用户,如果用户允许隐私协议,关键表单数据就备份到云端,这种就要加一个用户选择页面,选择比对从本地还是从云端恢复表单数据。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏