先补充下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. 微信小程序 - 入门指引

    稍微整了整微信小程序,还是有不少问题的,做个小总结吧 和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 一.微信公众平台 - 小程序后台 1.申请小程序账号 官网注册 注册时所用 ...

  2. 牛刀小试MySQL--innodb_flush_log_at_trx_commit小结

    参数名:innodb_flush_log_at_trx_commit 参数值: 0 事务提交的时候,不会去刷日志缓存区,也不会立马写入至日志文件中.这种设置最危险.如果数据库挂了且运气不好,数据库的最 ...

  3. Jackson解析XML

    使用Jackson maven项目的pom.xml依赖 <dependency> <groupId>com.fasterxml.jackson.dataformat</g ...

  4. Bootstrap学习记录-3.Badge、Breadcrumb、Buttons、 Button Group、Card、Carousel

    1. Badge Badge作为数值标记组件,它能作为链接或按钮的一部分来提供计数作用,而且它通过使用相对字体大小来适应父级元素的大小.它的最基本的修饰符为.badge .badge-*. <b ...

  5. 菜鸟入门【ASP.NET Core】4:在CentOS上安装.NET Core运行时、部署到CentOS

    下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows 第一步:Add the dotnet product feed( ...

  6. 【ichart】简单的统计图表ichart.js的使用

    1.首先下载,点击下载 2.只需要这一个js,粘贴赋值到自己项目中即可.   3.引入js <script type="text/javascript" src=" ...

  7. [PHP] 算法-快速排序的PHP实现

    快速排序: 1.基于二分的思想 2.第一个作为基准数,左右各一个指针,同时扫描,右边先走,找到比基准数小的停下 左边再走,找到比基准数大的停下,左右交换 3.当左右相遇的时候,把当前的和基准数调换,递 ...

  8. Git的概念及常用命令

    一.概念 Git是一个分布式的版本控制工具,区别于集中式管理的SVN. 二.优势 每个开发者都拥有自己的本地版本库,可以在本地任意修改代码.创建分支,不会影响到其他开发者的使用: 所有版本信息均保存在 ...

  9. Tomcat意外宕机分析

    之前在网上看过一篇文章,是讲Tomcat进程意外退出的,我看完感觉好奇,自己也测试了下,果然是有这种问题,所以自己也借此总结一下. 先简单说下测试过程,先创建一个web服务启动 test.sh,内容如 ...

  10. Python CNN卷积神经网络代码实现

    # -*- coding: utf-8 -*- """ Created on Wed Nov 21 17:32:28 2018 @author: zhen "& ...