解决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'))
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理，本文主要介绍了vue项目打包以及优化的实现步骤，感兴趣的可以了解一下2021-07-07
今天小编就为大家分享一篇Vue点击切换颜色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue是一款流行的前端框架，它提供了一系列的工具和组件，使得开发者可以更加便捷地创建交互式的Web应用程序，轮播图是Web应用程序中常见的一种交互式组件，本文将介绍如何使用Vue和第三方组件库 Element UI实现轮播图功能,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue props用法详解(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue-router源码之history类的浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要为大家详细介绍了vue分割面板封装实现记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue父子组件间引用之$parent、$children的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了Vue实现Header渐隐渐现效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
在现代Web应用程序中,数据导出到Excel格式是一项常见的需求,Vue.js是一种流行的JavaScript框架,允许我们构建动态的前端应用程序,本文将介绍如何使用Vue.js和xlsx组件轻松实现Excel数据导出功能,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了vue项目网站全局置灰功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论