云迈博客

您现在的位置是:首页 > 灌水专栏 > 正文

灌水专栏

vuex 页面store中数据丢失

彭静2022-02-01灌水专栏346
  在客户端存储数据:  HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具

  在客户端存储数据:

  HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度。

  之前,这些都是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢,而且效率不高。

  web存储分为localStorage个sessionStorage。

  区别在于存储的有效期和作用域不同。

  通过localStorage存储的数据是永久性的,除非web应用刻意删除存储的数据,或者用户通过设置浏览器配置(浏览器提供的特定的UI)来删除,否则数据将一直保存在用户的电脑上,永不过期。

  localStorage的作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据(不论该源的脚本是否真正的访问localStorage)。他们可以互相读取对方的数据,甚至可以覆盖对方的数据。但是,非同源的文档间互相都不能读取或者覆盖对方的数据。(即使他们运行的脚本是来自同一台第三方的服务器也不行)。

  sessionStorage存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的,一旦窗口或者标签页被永久关闭了,那么所有通过sessionStorage存储的数据也都被删除了。

  我这里使用sessionStorage,这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~