stoarge

1. localStorage：

• 存储大小：一般浏览器支持的是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 存储的值，实现不同标签页之间的通信。
  • 将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

2. localStorage 和 cookie 对比：

3. localStorage 和 sessionStorage 的区别：

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

4. 参考：

• 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...