stoarge

摘要：存储大小一般浏览器支持的是大小，不同浏览器会有所不同。一般我们会将存入中，但是在会自动将转换成为字符串形式。即可得到存储的值，实现不同标签页之间的通信。和对比和的区别属于永久性存储，而属于当前会话结束的时候，中的键值对会被清空。

存储大小：一般浏览器支持的是5M大小，不同浏览器会有所不同。

是H5的新特性，兼容性不是很好。

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

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

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

localStorage不会被爬虫抓取到。

localStorage只支持string类型的存储。一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式。这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串。读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法:

let storage = window.localStorage;
let data = {
      name: "aaa",
      sex: "man",
      hobby: "program"
};
let dataString = JSON.stringify(data);
storage.setItem("data", dataString);
let json = storage.getItem("data");
let jsonObj = JSON.parse(json);
console.log("json", json);
console.log("jsonObj", jsonObj);
console.log("ffffdd", typeof jsonObj);

方法和属性：

添加键值对：setItem(key, value);

获取键值对：getItem(key);

删除键值对：removeItem(key);

清除所有键值对：clear();

获取键名称：key(index);

（属性）获取localStorage中保存的键值对的数量：length。

获取键值对：

for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage.getItem(key);
}

事件：

storage事件：浏览器在localStorage数据变化（真正的发生变化）之后给你的一个通知。

包含的属性：

storageArea: 表示存储类型（session或local）

key：发生改变项的key

oldValue：key的原值

newValue: key的新值

url: key 改变发生的URL（有些早期版本中使用的是uri属性）

这个事件兼容性好像不好，要少用。

localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据，储存空间5M.

如何实现两个标签页的数据交互：

调用localStorage：

在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

localStorage属于永久性存储，而sessionStorage属于当前会话结束的时候，sessionStorage中的键值对会被清空。

https://www.jianshu.com/p/e4e...

https://www.jianshu.com/p/e3d...

https://segmentfault.com/a/11...

https://segmentfault.com/a/11...

https://www.jianshu.com/p/707...

https://juejin.im/post/5aede2...