使用Storage解决网页数据持久化问题

因为react的state中存储的数据在页面刷新之后会清空(若设定了初始值则会重置为初始值),为了将state中的数据保留下来,我想到了HTML5中的localStorage,它的大小为5m,使用浏览器的本地存储来保存键值对格式的数据.

LocalStorage的方法只有5个,直观易用:

localStorage.key()
//该方法接受一个数值n作为参数,返回第n个键名
localStorage.setItem()
//该方法接受键名和键值两个参数,将其存储到localStorage中,若键名存在,则将其覆盖
localStorage.getItem()
//该方法接受键名作为参数,返回键值
localStorage.removeItem()
//该方法接受键名作为参数,并删除该键值对
localStorage.clear()
//该方法会清空存储
复制代码

我使用的方法是,将需要在刷新后保存的数据在赋值时使用localStorage.setItem()同步到localStorage中,然后在页面刷新之后(在react的生命周期方法中)使用localStorage.getItem()取回数据

(以Chrome为例)网页中的localStorage数据可以在开发者工具->Application->Storage中查看

注意事项: 1.localStorage的访问遵从同源策略,所以不同源的网页是无法共用localStorage的

2.localStorage不同于sessionStorage,它是没有过期时间的(sessionStorage的数据会在浏览器关闭时清空),但它会在执行清空浏览数据时被清空

3.存进localStorage的数据会被强制类型转换为string类型

浏览器支持情况:

sessionStorage与localStorage的方法完全相同,主要区别是存储时间的长短

转载于:https://juejin.im/post/5a310129518825585132b16e