sessionStorage\localStorage总结

获取localStorage最大容量

• sessionStorage\localStorage在谷歌容量为5M左右

(function () {
  if (!window.localStorage) {
    console.log('当前浏览器不支持localStorage!')
  }
  var test = '0123456789';
  var add = function (num) {
    num += num;
    if (num.length == 10240) {
      test = num;
      return;
    }
    add(num);
  }
  add(test);
  var sum = test;
  var show = setInterval(function () {
    sum += test;
    try {
      window.localStorage.removeItem('test');
      window.localStorage.setItem('test', sum);
      console.log(sum.length / 1024 + 'KB');
    } catch (e) {
      console.log(sum.length / 1024 + 'KB超出最大限制');
      clearInterval(show);
    }
  }, 0.1)
})()

获取localStorage已用容量

(function () {
  if (!window.localStorage) {
    console.log('浏览器不支持localStorage');
  }
  var size = 0;
  for (item in window.localStorage) {
    if (window.localStorage.hasOwnProperty(item)) {
      size += window.localStorage.getItem(item).length;
    }
  }
  console.log('当前localStorage已用容量为' + (size / 1024).toFixed(2) + 'KB');
})()

生命周期

• localStorage 永久保存，同源策略的多个标签页或iframe可以共享
• sessionStorage 随标签页关闭而消失，刷新不会清除，同一标签页的同源iframe可以共享

监听变化

// 当同源的某个标签页或iframe发生改变时触发
window.addEventListener("storage", function (e) {
  console.log(e.key,e.oldValue,e.newValue);
});

与cookie区别

• 位置：cookie在http请求中来回传递
• 大小：cookie不能超过4K
• 有效期：cookie可以设置过期时间
• 作用域：cookie所有同源窗口和iframe可以共享，可以通过path限定某一路径下可用

与IndexDB\SQLite浏览器数据库区别

• sqlite：关系型数据库，不是很好用
• indexDB：
  1. 非关系型数据库
  2. 存储大小250M左右
  3. 键值对存储
  4. 异步
  5. 支持事务
  6. 同源限制
  7. 支持二进制存储
• 阮一峰 indexdb入门教程