vue中使用LocalStorage

先补充下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'));