vuex和localstorage、sessionStorage存储方式及区别

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。官网：https://vuex.vuejs.org/zh/。

//提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data。
import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    name:"张三",
    age:12
  },
})

localstorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

特点：存储在 localStorage 的数据可以长期保留。localStorage的生命周期是永久的，关闭页面或者浏览器之后localStorage中的数据也不会消失。localStorage删除数据要手动删除，否则数据永远不会消失。

存储内容的类型：localStorage只能存储字符串类型，对于复杂对象可以使用ECMAScript对象的stringify和parse处理。

sessionStorage

sessionStorage都保存在客户端，一般不与服务器进行通信交互。sessionStorage存储数据大小一般是5MB。

sessionStorage的生命周期仅在当前会话有效。sessionStorage引入了"浏览器窗口的概念"。sessionStorage在同源窗口中始终存在数据，只要浏览器窗口没有关闭，刷新或者重新进入页面数据依然存在。关闭浏览器窗口后数据会被删除。再次独立打开同一个窗口同一个页面，sessionStorage也是不一样。

特点：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

存储内容的类型：sessionStorage只能存储字符串类型，对于复杂对象可以使用ECMAScript对象的stringify和parse处理。

区别

1、vuex存储在内存；
2、localstorage(本地存储)则以文件的方式存储在本地，永久保存；
3、sessionstorage( 会话存储 )，临时保存；
4、当刷新页面(这里的刷新页面指的是F5刷新，属于清除内存了)时vuex存储的值会丢失，sessionstorage页面关闭后存储的数据就被清除掉了，而localstorage存储的数据则不会被清理掉。

推荐文章：
vuex和localstorage,sessionStorage存储方式，及区别
本地存储三种方式cookie、localStorage、sessionStorage的详细介绍
Vuex详解，一文彻底搞懂Vuex