46.vue数据存储

vuex 刷新就会丢失
sessionStorage 它有只要页面不关闭,不手动删除数据,数据就会一直存在,现在貌似存储量为4兆左右
localStorage 它的特点是,除非我们手动删除,否则数据不会丢失,即使关闭页面,数据依然会存在,着让我们很容易想到页面经常提示的是否要保存密码,当点击是的时候,数据就保存到localStorage中了

当点击que事件时,进行跳转,并保存数据
que (item) {
       this.cc.push(item.name)
       var name = this.cc.toString()
       sessionStorage.setItem('objStr', name)
//        this.$store.commit('jiLu', name)
       this.getDate()
//        this.$router.push('/ershou/' + name)
       this.$router.push({path: '/ershou', query: {village: name}})
     }
那么数据在哪读呢,可以在我们任何vue的文件中读,例如

created () {
     var a = sessionStorage.getItem('objStr')
     if (a) {
       this.cc = a.split(',')
     }
   }
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'));

https://blog.csdn.net/gang456789/article/details/78043356

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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,588评论 1 45
  • 本文介绍本地数据存储的选型。简单总结一些查询到的关于本地数据存储的技术。 控制台展示前端存储 Chrome: 前端...
    谢大见阅读 9,102评论 1 8
  • 作者:kim来自:kimshareclub微信公众号 1、问题描述: 一般在登录成功的时候需要把用户信息,菜单信息...
    前端进阶体验阅读 50,986评论 1 32
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,708评论 1 52
  • 1、JS的数据类型只有浮点型,没有整型。null,underfined,boolean,number,string...
    6e5e50574d74阅读 2,242评论 2 1