LocalStorage与 SessionStorage、cookie的对比和对JSON对象类型的转换

LocalStorage与 SessionStorage、cookie的对比

HTML5中的Web Storage包含了两种存储方式：sessionStorage和localStorage

sessionStorage和localStorage的区别：

1. sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
2. localStorage生命周期是永久，这就是说除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
3. 需要注意的是：不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

参考博客：https://blog.csdn.net/kerryqpw/article/details/71439104

sessionStorage和cookie的区别：

1. localStorage拓展了cookie的4K限制
2. localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1. 1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

   2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

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

   4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

   5、localStorage不能被爬虫抓取到

拓展：Cookie和Session机制

参考资料：https://www.cnblogs.com/andy-zhou/p/5360107.html

 

LocalStorage对JSON对象类型的转换

将JSON转换为String，然后保存在localStorage（代码为基于Angular的Ionic）

 // JSON转换成string保存在localStorage
    this.strPick = JSON.stringify(this.pick)
    localStorage.setItem('pick', this.strPick)

在接收localStorage的地方将String再转换为JSON

    // 获取localStorage中的数据
    this.receiveUser = localStorage.getItem('pick');
    // 将数据转换类型
    this.users = JSON.parse(this.receiveUser);