解决Vue_localStorage本地存储和本地取值问题
更新时间：2024年07月26日 08:55:29 作者：我不是长安
这篇文章主要介绍了解决Vue_localStorage本地存储和本地取值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue_localStorage本地存储和本地取值
Vue本地存储(3种)
① localStorage(长期存储)
- 存：localStorage.setitem('key',data)
- 取：localStorage.getitem('key')
② sessionStorage(临时存储)
- 存：sessionStorage.setitem('key',data)
- 取：sessionStorage.getitem('key')
③ cookie(有时效性)
共同点
- ①都可以存储，并且存储只跟域名走、只存储在当前域名下。
不同点
▶存储大小不同
- ①localStoage/sessionStorage /5M
- ②cookie /4K 有时效性 如果没有设置时间会话关闭自动失效
- ③localStorage/不主动删除，数据一直在。
- ④sessionStorage/在浏览器打开期间存在，关闭当前会话即清空(刷新不清除)
sessionStorage和localStorage用法基本一致，引用类型的值需要转换成Json，我这里用localstorage来举例。
Vue存值取值本地存储
根据项目需求，也可以使用sessionStorage进行存值取值
- 1.存值：sessionStorage.setItem(key,value)
sessionStorage.setItem("username",user.name)- 2.取值：sessionStorage.getItem(key);
sessionStorage.getItem("username")如果直接使用sessionStorage.setItem和sessionStorage.getItem来进行存取对象则不能正常使用该对象，并且在Application的SessionStorage中会显示[object object]
解决方法：转换为json格式进行存取
- 1.存值时转为Json字符串存入，用JSON.stringify()
sessionStorage.setItem('userObj', JSON.stringify(user))- 2.取值转回对象，用JSON.parse()
JSON.parse(sessionStorage.getItem('userObj'))
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Object.assign触发watch原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在需求中,经常遇见pdf的在线预览效果,很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,比如vue-pdf,下面这篇文章主要给大家介绍了关于vue中使用vue-pdf组件实现文件预览及相应报错解决的相关资料,需要的朋友可以参考下2022-09-09
很多朋友在使用vue3+echarts5技术时会遇到echarts无法绽放的问题，今天小编就给大家分享下问题描述及解决方案，感兴趣的朋友跟随小编一起看看吧2022-11-11
这篇文章主要介绍了vue3生命周期原理与生命周期函数,结合简单实例形式分析了vue3的生命周期基本原理、以及各个阶段的生命周期钩子函数功能、使用技巧与相关注意事项,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue中Virtual DOM和Diff原理及实现的相关知识，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-03-03
下面小编就为大家分享一篇iview日期控件,双向绑定日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最近项目要用到百度地图api,好久没用到地图,就百度了一番,下面这篇文章主要给大家介绍了关于vue3中使用百度地图的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
今天小编就为大家分享一篇vuex actions传递多参数的处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue导入excel文件的两种方式(form表单和el-upload)
最近开发遇到一个点击导入按钮让excel文件数据导入的需求,下面这篇文章主要给大家介绍了关于Vue导入excel文件的两种方式,分别是form表单和el-upload两种方法,需要的朋友可以参考下2022-11-11
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下2024-01-01
最新评论