vuex和localstorage,sessionStorage存储方式，及区别

最新推荐文章于 2025-01-25 08:27:11 发布

Just丶九月

最新推荐文章于 2025-01-25 08:27:11 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vuex、localStorage、sessionStorage

原文链接：https://blog.youkuaiyun.com/weixin_43848576/article/details/100545537

Vue 专栏收录该内容

29 篇文章

订阅专栏

本文深入解析了前端存储技术，包括sessionStorage与localStorage的区别，以及它们与Vuex在数据存储、持久性和应用场景上的对比。sessionStorage适用于会话级别的数据存储，数据在浏览器窗口关闭后消失；localStorage则提供持久化存储，数据不会因浏览器重启而丢失；Vuex用于组件间状态管理，但数据不持久。文章还讨论了数据类型和复杂对象的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载：https://blog.youkuaiyun.com/weixin_43848576/article/details/100545537

sessionStorage

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
用法： 
存： //
1. 点（.）运算符                 sessionStorage.lastname = 'key';   
2. 方括号（[ ]）运算符           sessionStorage['lastname'] = 'key';
3. localStorage.setItem         sessionStorage.setItem("lastname", "key");

取： 
1. 点（.）运算符                 sessionStorage.lastname  => key
2. 方括号（[ ]）运算符           sessionStorage['lastname']  => key
3. localStorage.getItem         sessionStorage.getItem("lastname")  => localStorage
————————————————
版权声明：本文为优快云博主「小曲曲」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_43848576/article/details/100545537

localStorage

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
用法： 
存：
1. 点（.）运算符                 localStorage.lastname = 'key';   
2. 方括号（[ ]）运算符           localStorage['lastname'] = 'key';
3. localStorage.setItem         localStorage.setItem("lastname", "key");

取：
1. 点（.）运算符                 localStorage.lastname  => key
2. 方括号（[ ]）运算符           localStorage['lastname']  => key
3. localStorage.getItem         localStorage.getItem("lastname")  => key

作者：Q天涯过客
链接：https://juejin.im/post/5d6f5641f265da03a715f1d4
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
————————————————
版权声明：本文为优快云博主「小曲曲」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_43848576/article/details/100545537

Vuex：https://blog.youkuaiyun.com/Silence_Sep/article/details/101302874

区别


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

2.应用场景：
vuex用于组件之间的传值，当应用遇到多个组件共享状态时候，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。
localstorage，sessionstorage则主要用于不同页面之间的传值。

3.永久性：
当刷新页面（这里的刷新页面指的是F5刷新,属于清除内存了）时vuex存储的值会丢失，
sessionstorage页面关闭后就清除掉了，localstorage不会。  

注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，
如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。
————————————————
版权声明：本文为优快云博主「小曲曲」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_43848576/article/details/100545537