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'));

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,907评论 1 45
  • 1.区域模块分解 : 按照空间区域,对复杂的案例效果,分解为几个较简单的模块部分。目的是:更方便的理解案例原理。 ...
    空谷悠阅读 559评论 0 1
  • 一、本地存储由来的背景 由于HTML4时代Cookie的大小、格式、存储数据格式等限制,网站应用如果想在浏览器端存...
    破罐子苏阅读 858评论 0 0
  • 【SESSIONSTORAGE, LOCALSTORAGE, COOKIE】 小课堂【武汉第156期】 分享人:庄...
    庄引之阅读 917评论 0 6
  • 企业文化 星空教育为了弘扬文化传统,丰富青少年儿童的精神文化生活,培育更多优秀的少儿艺术骨干、人才,现开毛笔、硬笔...
    Mango_db45阅读 767评论 0 3