vuex本地存储

Posted 2021-01-26 xiaofenguo

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中获取，组件就可以响应式的变化