先补充下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 知识点的更多相关文章

  1. React评论展示案例(包含知识点:state、props、ref、React声明周期、localStorage本地存储等)

    本案例在上一篇的案例(React组件之间通过Props传值的技巧(小案例,帮助体会理解props.state.受控组件和非受控组件等))的基础上加强功能和用户体验,但是当然还有很多需要改进的地方,后期 ...

  2. 【干货分享】前端面试知识点锦集01(HTML篇)——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

  3. [vue案例的知识点]todo-list

    文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...

  4. 【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】

    前言 最近碰到几个恶心问题,也发现一点优化技巧,以及对Hybrid知识的一些整理,这里便一并拿出来做分享了,关于Hybrid的调试,会是我今后一个重点 我的博客首先是学习笔记,方便自己做知识沉淀,以后 ...

  5. javascript中的一些核心知识点以及需要注意的地方

    前言 近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来 比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不 ...

  6. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  7. 前端开发面试知识点大纲--摘自jackyWHJ

    前端开发面试知识点大纲:HTML&CSS:    对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...

  8. 【经验之谈】前端面试知识点总结(HTML相关)——附答案

    目录 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 2.HTML5的优点与缺点? 3.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? 4.HTML5有哪些新 ...

  9. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

随机推荐

  1. Spring Boot初识(4)- Spring Boot整合JWT

    一.本文介绍 上篇文章讲到Spring Boot整合Swagger的时候其实我就在思考关于接口安全的问题了,在这篇文章了我整合了JWT用来保证接口的安全性.我会先简单介绍一下JWT然后在上篇文章的基础 ...

  2. MyBatis 分页之拦截器实现

    分页是WEB程序中常见的功能,mybatis分页实现与hibernate不同,相比hibernate,mybatis实现分页更为麻烦.mybatis实现分页需要自己编写(非逻辑分页RowBounds) ...

  3. leetcode — zigzag-conversion

    /** * Source : https://oj.leetcode.com/problems/zigzag-conversion/ * * Created by lverpeng on 2017/6 ...

  4. Python机器学习笔记:不得不了解的机器学习面试知识点(1)

    机器学习岗位的面试中通常会对一些常见的机器学习算法和思想进行提问,在平时的学习过程中可能对算法的理论,注意点,区别会有一定的认识,但是这些知识可能不系统,在回答的时候未必能在短时间内答出自己的认识,因 ...

  5. Django 学习笔记(五) --- Ajax 传输数据

    人生苦短 ~ Tips:仅适用于 Python 3+(反正差别不大,py2 改改也能用).因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的 ...

  6. [SHOI2009] 会场预约

    Description 题意:支持操作: 按顺序在数轴上插入一条线段,删除并询问所有与这条线段有交的线段个数. 询问当前数轴上一共有多少条线段. Solution 想做了很久的题=.= 观察到和线段\ ...

  7. SQL 数据快速查询优化小技巧(仅供参考)

    .应尽量避免在where子句中使用!=或<>操作符 .应尽量避免在where子句中使用or来连接条件 如: 可以这样查询 Union all .in 和not in 也要慎用,否则会导致全 ...

  8. 弱引用(WeakReference)

    在应用程序代码内实例化一个类或结构时,只要有代码引用它,就会形成强引用.这意味着垃圾回收器不会清理这样的对象使用的内存.但是如果当这个对象很大,并且不经常访问时,此时可以创建对象的弱引用,弱引用允许创 ...

  9. 无法初始化 PowerShell 主机解决方案

    Question无法初始化 PowerShell 主机.如果您的 PowerShell 执行策略设置设为 AllSigned,请先打开程序包管理器控制台以初始化该主机. --------------- ...

  10. 有道云笔记链接——JAVA面向对象的学习

     http://note.youdao.com/noteshare?id=cf39a0e493a6b3c7ad5d22204a7e7843