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…