stoarge

jiezi

5 年前

存储大小：一般浏览器支持的是 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('dddd', 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 存储的值，实现不同标签页之间的通信。

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…

stoarge

1. localStorage：

2. localStorage 和 cookie 对比：

3. localStorage 和 sessionStorage 的区别：

4. 参考：