在react中使用本地存储来配合state进行数据持久化
最近因工作需求需要对很多东西进行数据持久化
在react 里做数据持久化是要比在vue里稍微复杂一些,react里是没有在vue里有个keep-alive 的标签以及生命周期但是在react 是没有的,所以需要自己想办法进行缓存,在这里需要用到sessionStorage 或者LocalStorage 这两种方法 这个可以根据不同的情况进行使用
状态的保持以及Data 得保持
由于我得需求是需要对当前页面值得判断(不得已)以及数值得保存,那么首先需要做得就是2点
- flag标志得缓存
- 数据本身值
持久化
1 每次进行操作需要对flag得状态进行进行状态更新
2 每次进行操作需要对this.setstate 更新得同时对sessionStorage 或者 sessionStaorage 的值进行更新。
为什么更新了本地存储还需要更新state?
只有值在state 里 的时候才可以进行热加载,热更新所以当前页面该缓存是缓存但是更新state 是必不可少的。
在哪里进行持久化
当我们准备就绪的时候,问题来了到底在哪里进行数据的持久化呐?在react 就是state里如果是在vue 就是在data 里进行进行sessionStarage.getItem(),获取上一个值