解决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封装组件js版基本步骤，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要给大家总结介绍了关于vue项目调试的三种方法,大家可以根据需要选择调试方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-09-09
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结2022-08-08
后端写个上传图片的接口可不是很简单，只需要让这个字段限制为图片格式，后台做个保存的逻辑就完事了，前端处理还要牵扯到请求头，数据格式的处理等等问题，按照老传统把图片按照字符串往接口put发现返回的全是400错误，直到我知道了前端的FormData方法！2021-05-05
这篇文章主要给大家介绍了关于vue中input获取光标位置并追加内容的相关资料,vue通过当前的光标来进行插值,从而需要去获取光标所在的位置,需要的朋友可以参考下2023-07-07
下面小编就为大家分享一篇vue与vue-i18n结合实现后台数据的多语言切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue是一个单页应用，轻量，并且不会重复下载数据。当它从一个页面跳转到另一个页面时，原来的页面的vue实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性2017-11-11
这篇文章主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
前端经常会用到UI提供的各种图表,推荐阿里的图标库,下面这篇文章主要给大家介绍了关于element使用自定义icon图标的详细步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue中使用hover选择器无效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论