vuex本地存储

vuex与localstorage

区别:vuex数据存储的内存,localstorage的数据存储在本地

应用场景:vuex用于组件之间的传值,localstorage用于不同页面之间的传值

永久性: 当刷新页面时,vuex中的数据会丢失,locstorage不会。

解决vuex在页面刷新后数据丢失的问题:

js代码是运行在内存中的,代码运行时多有的方法 变量都是保存在内存中的。刷新页面时,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要存储必须存储在外部,例如:localstorage sessionstorage indexdb等,这些都是浏览器提供的API,可以将数据存储在硬盘上,做持久化存储。

h5提供了了,两种在客户端存储数据的新方法: localstorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时 会话结束,有时间限制;

cookie不适合大量数据的存储,因为它们由每个服务器的请求来传递,这使得cookie速度很慢,而且效率不高

localstorage的作用域是限定在稳当级别的,同源的文档共享同样的localstorage数据,它们可以相互读取对方的数据,甚至可以覆盖对方的数据,非同源的文档不能读取或者覆盖对方的数据。

需要注意的是vuex中的变量是相应式的,而sessionStorage不是,当改变vuex中的状态,组件会检测到改变,而sessionStorage不会,页面需要刷新才可以看到变化;

让vuex中的数据从sessionStorage中获取,组件就可以响应式的变化

猜你喜欢

转载自www.cnblogs.com/xiaofenguo/p/10119132.html