解决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'))

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。