localStorage 知识点

Posted 星空007

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了localStorage 知识点相关的知识,希望对你有一定的参考价值。

JS对象
读取形式:
localStorage.name
添加/修改
localStorage.name = "xuanyuan"
其中"xuanyuan"只能是字符串形式(目前为止只支持字符串)。所以存储时是JSON对象时需要执行下JSON.stringify,所以获取时需要执行下JSON.parse
删除
detele localStorage.name

API
获取键值对数量
localStorage.length
读取
localStorage.getItem(‘name‘), localStorage.key(i)
添加/修改
localStorage.setItem(‘name‘,‘xuanyuan‘)
删除对应键值
localStorage.removeItem(‘name‘)
删除所有数据
localStorage.clear()

顺便说下,localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
sessionStorage默认的有效期是浏览器的会话时间(也就是说标签页关闭后就消失了)。
localStorage作用域是协议、主机名、端口。(理论上,不人为的删除,一直存在设备中)
sessionStorage作用域是窗口、协议、主机名、端口。

知道了这些知识点后,你的问题就很好解决了。
localStorage是window上的。所以不需要写this.localStorage,你这里的this,是指vue实例。
方案一、
// 这里写的答案是指data.body.data是JSON。不是JSON则不需要JSON.parse和JSON.stringify
存储:localStorage.data = JSON.stringify(data.body.data);
获取:JSON.parse(localStorage.data);
方案二、
存储:localStorage.setItem(‘data‘,JSON.stringify(data.body.data));
获取:JSON.parse(localStorage.getItem(‘data‘));

 

注:转自别人的回答

以上是关于localStorage 知识点的主要内容,如果未能解决你的问题,请参考以下文章

后台返回完整的HTML页面代码,如何打开展示

【知识】浏览器的LocalStorage本地存储入门

Vue todolist练习 知识点

localStorage

Mozilla localStorage.getItem 基于唯一密钥的部分知识

客户端相关知识学习之Android H5交互Webview实现localStorage数据存储