因为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的方法完全相同,主要区别是存储时间的长短
网友评论