在 React 中页面重新加载时怎样保留数据

类别：react / 日期：2023-01-06 / 浏览：1067 / 评论：0

这个问题就设计到了数据持久化，主要的实现方式有以下几种：

Redux：将页面的数据存储在 redux 中，在重新加载页面时，获取 Redux 中的数据；

data.js：使用 webpack 构建的项目，可以建一个文件，data.js，将 数据保存 data.js 中，跳转页面后获取；

sessionStorge：在进入选择地址页面之前，componentWillUnMount 的时候，将数据存储到 sessionStorage 中，每次进入页面判断 sessionStorage 中有没有存储的那个值，有，则读取渲染数据；没 有，则说明数据是初始化的状态。返回或进入除了选择地址以外的页 面，清掉存储的 sessionStorage，保证下次进入是初始化的数据-React

history API：History API 的 pushState 函数可以给历史记录关联 一个任意的可序列化 state，所以可以在路由 push 的时候将当前页 面的一些信息存到 state 中，下次返回到这个页面的时候就能从 state 里面取出离开前的数据重新渲染。react-router 直接可以支 持。这个方法适合一些需要临时存储的场景。-react