本地存储的3种方式、vuex的比较
localStorage除非手动删除,否则会永久存储在浏览器中。存储最大限制一般为5M或更多(不同浏览器不同)。支持sessionStorage的浏览器最小版本:IE8、Chrome 5存储内容过多会消耗内存空间,导致页面变卡。常用方法:let storage = window.localStoragestorage.setItem('key', 'value') // 存储,key...
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使用总结》
更多推荐
所有评论(0)