localStorage、sessionStorage、vuex使用及区别

目录

Vuex

localStorage

sessionStorage

语法

区别

---

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属于永久性存储，需要在关闭浏览器或退出登录时手动删除。

参考：

vue实战开发020:LocalStorage与SessionStorage的区别与用法

Vuex