本地存储的3种方式、vuex的比较

localStorage
除非手动删除,否则会永久存储在浏览器中。
存储最大限制一般为5M或更多(不同浏览器不同)。

支持sessionStorage的浏览器最小版本:IE8、Chrome 5
存储内容过多会消耗内存空间,导致页面变卡。
常用方法:

let storage = window.localStorage
storage.setItem(‘key’, ‘value’) // 存储,key-value 为 键-值
storage.getItem(‘key’) // 获取
storage.removeItem(“key”) // 删除某个键的值
storage.clear() // 删除所有localStorage数据
storage.key(index) // 获取第几条数据的键名。index为数据索引

sessionStorage
只在当前所在窗口关闭前有效。窗口关闭后其存储数据也就会被自动清除。除了生命周期这一点,其他特性方法与localStorage基本一致。

cookie
存储限期可以自定义,默认是7天。超过存储期限后,数据会被自动清除。
存储大小不能超过4K。
在遵循同源策略的http请求中,会把cookie数据放在请求头中自动传给服务期。多用来传递当前用户身份信息,对账号登录状况作校验。

共性
cookie、localStorage、sessionStorage
这个三个都是浏览器本地存储,都遵循同源策略。
这三个都是只能存储string类型数据。(如果是非string类型,会直接转化为string类型存储进去)

vuex
vuex与以上三种方式不同。vuex是vue库中用于状态管理的工具,全局存储 主要是用于组件之间的通信。可监听数据状态的变更。当vuex数值发生变化时,其他组件处可以响应式地监听到该数据的变化。
vuex数据在当前vue实例被创建后,销毁前是生效的。创建一个新的vue,vuex数据就是初始化的数据状态。

部分摘自:

《localStorage使用总结》

作者: 老孙
来源:CSDN
原文:https://blog.csdn.net/laos1/article/details/86533079
版权声明:本文为博主原创文章,转载请附上博文链接!

未经允许不得转载:MR LYU » 本地存储的3种方式、vuex的比较

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址