乐趣区

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…
退出移动版