1、区别及适用场景
(1)区别:
vuex
存储在内存,localstorage
(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage
( 会话存储 ) ,临时保存。localStorage
和sessionStorage
只能存储字符串类型,对于复杂的对象可以使用ECMAScript
提供的JSON
对象的stringify
和parse
来处理。
(2)应用场景:
vuex
用于组件之间的传值,localstorage
则主要用于不同页面之间的传值。
(3)永久性:
当刷新页面时vuex
存储的值会丢失,localstorage
不会。注:很多同学觉得用localstorage
可以代替vuex
, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage无法做到响应式,vuex可以绑定数据响应式。
2、Vuex数据状态持久化的使用场景
(1)购物车
比如你把商品加入购物车后,没有保存到后台的情况下,前端来存,就可以通过这种方式vuex+localStorage(sessionStorage)
。
(2)会话状态
授权登录后,token
就可以用Vuex+localStorage(sessionStorage)
来存储。
(3)一些不会经常改变的数据
比如城市列表等(当前也要留下可以更新的入口,比如版本号)
小提示:localStorage.setItem(key, String)
, set
的值必须是字符串,如果你的数据是对象都需要先行转换(JSON.stringify(xxx)
),取出时localStorage.getItem(key)
,取出后的字符串可以通过JSON.parse(xxx)
转回对象。