目录
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
localStorage
译为“本地存储器”，是HTML5中新增的一个存储对象，跟cookie一样也是用来本地存储来的，但是解决了cookie存储空间不足的问题(cookie每条存储空间为4k)，而localStorage浏览器一般支持5M。
sessionStorage
译为“会话存储”，也是HTML5新增的一个存储对象， 用于本地临时存储同一窗口的数据，在关闭窗口之后将会删除这些数据，sessionStorage浏览器一般支持5M。
注意：localStorage或sessionStorage通常以键/值对形式的字符串进行存储，所以在存储时需要对数据格式进行转换，使用JSON.stringify方法将对象转换成字符串，提取时用JSON.parse方法将字符串转换成对象。
使用vuex+localStorage/sessionStorage可以解决vuex刷新数据丢失的问题。https://blog.csdn.net/maidu_xbd/article/details/104774454
语法
localStorage/sessionStorage语法
|
方法 |
localStorage语法 |
sessionStorage语法 |
|
保存数据 |
localStorage.setItem("key","value") |
sessionStorage.setItem("key","value") |
|
读取数据 |
localStorage.getItem("key") |
sessionStorage.getItem("key") |
|
删除数据 |
localStorage.removeItem("key") |
sessionStorage.removeItem("key") |
|
清空 |
localStorage.clear() |
sessionStorage.clear() |
|
获取指定下标数据 |
localStorage.key(0) |
sessionStorage.key(0) |
打开浏览器开发者工具，在Application中查看localStorage和sessionStorage。
vuex语法及使用：https://blog.csdn.net/maidu_xbd/article/details/89140696
区别
- vuex存储在内存，localstorage则以文件的方式存储在本地，sessionstorage会话存储，临时保存。
- localStorage和sessionStorage只能存储字符串类型，vuex可以存储任意数据类型。
- vuex用于组件之间的传值，localstorage、sessionstorage则主要用于不同页面之间的传值。
- 当刷新页面时,vuex存储的值会丢失，sessionStorage、localstorage存储的值不会丢失。
- localStorage中的数据可在多个标签页共享，sessionStorage中的数据只能在一个标签中。
- sessionStorage的数据只保存在当前会话中，当关闭窗口或标签页之后将会删除这些数据，而localStorage属于永久性存储，需要在关闭浏览器或退出登录时手动删除。
参考：