Vue中关于localStorage的使用总结

1、什么是localstorage

• localStorage是HTML5提供的在客户端存储数据的新方法之一，主要用于长久保持整个网站的数据，保持的数据没有过期时间，直到手动删除，存储形式一般为key/value对的数据，另一种是sessionStorage。

• localStorage实现数据存储没有时间限制，sessionStorage针对一个session实现数据存储且有时间限制，其默认的时间有效期为浏览器的会话时间。之前客户端的数据存储由cookie实现，但cookie不适合大量数据存储，其存储量最大为4K，localStorage一般浏览器支持5M的存储量。

2、localStorage的优点

• localStorage拓展了cookie的存储量，由原来的4K拓展到现在的5M。

• localStorage将第一次请求的数据直接存储到本地，相当于支持一个5M大小的针对于前端页面的数据库，可节约带宽。

• localStorage中的内容不能被爬虫抓取到，有一定的安全性。

3、localStorage的缺点

• localStorage针对不同的浏览器版本存储量不统一，并且只支持IE8以上的IE版本。

• localStorage的值类型限定为string类型，因此在使用localStorage存储数据时需进行相关的数据转换方法，对于常见的JSON对象类型常用的方法为JSON.stringify()。

• localStorage本质上是对字符串的读取，不能存储过多的内容，否则会消耗内存空间，导致访问页面出现卡顿现象。

• localStorage在浏览器的隐私模式下面是不可读取的。

4、localStorage的一般使用方法

• localStorage写入数据

  localStorage.setItem(‘key’,‘value’)

• localStorage读取数据

  localStorage.getItem(‘key’)

• localStorage删除数据

  localStorage.removeItem(‘key’)
  5、Vue中使用localStorage的使用

• 写入数据

  const data = {id:‘Num01’,info:‘hello vue’,size:1024};
  localStorage.setItem(‘wr1’,JSON.stringify(data));
  const newinfo = “Vue test”;
  localStorage.setItem(‘wr2’,newinfo);

• 读取数据

  var rd1 = JSON.parse(localStorage.getItem(‘wr1’));
  var rd2 = localStorage.getItem(‘wr2’);

• 删除某条数据

  localStorage.removeItem(‘wr1’);

• 删除所有数据

  localStorage.clear()
  6、注意点
  localStorage是window上的，不需写this.localStorage，vue中写this，是指vue实例，会报错。

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

福利~ 福利~ 福利~ 1块钱一次帮下CSDN资料

添加微信，备注下载资料~所需下载CSDN资料链接可通过微信发送。