一张表格告诉你,Vuex和Storage 的区别
Vuex | Storage(cookies和localStorage/sessionStorage) | |
---|---|---|
定义 | Vuex是vue的生态系统提供的一个插件,主要用来进行数据的状态管理(本质区别),也就是集中管理项目公共数据 | 由浏览器提供的缓存机制,包含了三种存储模式 cookie、localStorage、sessionStorage |
储存位置 | 内存 | 以文件的方式存储在本地 |
生命周期 | 与页面的生存周期相同(如关闭页面、刷新等数据就会消失) | localStorage是永久存储数据,除非代码或手动删除;sessionStorage 生存于应用会话期间,临时存储数据,浏览器关闭后自动清除 |
储存数据类型 | 无指定需求 | 只能存储字符串类型,对于复杂的对象可以使用JSON.stringify()和JSON.parse()来读写 |
存储空间 | 取决于可用内存和浏览器的限制 | 有默认的大小,最大5M(cookie 4K,localStorage、sessionStorage 5M) |
应用场景 | 无法跨标签页、跨物理页面共享使用,主要用于组件之间的传值(响应式共享数据);可以监听数据的变化(当vuex数值发生变化时,其他组件处可以响应式地监听到该数据的变化,当数据改变时,项目中引用到该数据(并且正在监听的)的地方都会发生改变) | 则可以在同一域名底下共享,主要用于不同页面之间的传值 |
用途 | 用于管理页面内容及组件的状态;可以进行模块化存储,使用moudle模块化开发,可以对存储数据进行归类,避免存储内容过于臃肿 | 主要是用于存储数据(比如token) |