vuex存储和本地存储(localstorage、sessionstorage)的区别

转载自：https://www.cnblogs.com/jiajialove/p/12606695.html

转载自：https://www.cnblogs.com/leijee/p/7506301.html

区别及适用场景：

• 1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

• 2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。

• 3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到响应式，vuex可以绑定数据响应式。
  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)转回对象。

localstorage、sessionstorage

存储对象：
　　在主流浏览器中，添加了html5 Web Storage API 的接口，storage是一个存储对象，它包括会话存储（session storage）或本地存储（local storage），它们分别有添加、修改或删除存储数据项的功能。
如果我们想要操作一个会话存储（session storage），可以使用 Window.localStorage对象，操作本地存储（local storage），可以使用 Window.sessionStorage对象。

localStorage介绍:

特征：

• 1 除非手动清除，否则永久保存在浏览器

• 2 存储大小一般为5MB

• 3 .只存在于客户端（浏览器）中，不参与和服务器的通信

• 4 api使用简单，可以直接拿来使用，也可自己封装来对Object和Array有更好的支持

• 5 相同浏览器的不同页面间可以共享相同的 localStorage

• 6 不同浏览器无法共享localStorage或sessionStorage中的信息

api方法介绍：

• localstorage.setItem(key,value) //该方法接受键，值两个参数，如果键存在，就更新值

• localstorage.getItem(key) //该方法接受一个参数值key,返回对应的value值

• localstorage.key(index) 　　 //该方法一个number值，返回对应下标的key

• localstorage.removeItem(key) //该方法接受一个参数值key,把当前key，value从localstorage中删除

• localstorage.clear() 　　　　 //该方法 清除对象中所有的key，value

sessionStorage介绍:

特征：

• 1 仅在当前会话下有效，浏览器被关闭或当前页面被关闭的情况下清除

• 2 存储大小一般为5MB

• 3 只存在于客户端（浏览器）中，不参与和服务器的通信

• 4 api使用简单，可以直接拿来使用，也可自己封装来对Object和Array有更好的支持

• 5 不同页面或标签页间无法共享sessionStorage的信息

• 6 不同浏览器无法共享localStorage或sessionStorage中的信息

api方法介绍：

• sessionStorage.setItem(key,value) //该方法接受键，值两个参数，如果键存在，就更新值

• sessionStorage.getItem(key) //该方法接受一个参数值key,返回对应的value值

• sessionStorage.key(index) 　　 //该方法一个number值，返回对应下标的key

• sessionStorage.removeItem(key) //该方法接受一个参数值key,把当前key，value从sessionStorage中删除

• sessionStorage.clear() 　　　　 //该方法 清除对象中所有的key，value