localStorage、sessionStorage、vue使用及区别
目录
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.****.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.****.net/maidu_xbd/article/details/89140696
区别
- vuex存储在内存,localstorage则以文件的方式存储在本地,sessionstorage会话存储,临时保存。
- localStorage和sessionStorage只能存储字符串类型,vuex可以存储任意数据类型。
- vuex用于组件之间的传值,localstorage、sessionstorage则主要用于不同页面之间的传值。
- 当刷新页面时,vuex存储的值会丢失,sessionStorage、localstorage存储的值不会丢失。
- localStorage中的数据可在多个标签页共享,sessionStorage中的数据只能在一个标签中。
- sessionStorage的数据只保存在当前会话中,当关闭窗口或标签页之后将会删除这些数据,而localStorage属于永久性存储,需要在关闭浏览器或退出登录时手动删除。
参考: