localStorage与sessionStorage

localStorage

• 浏览器本地缓存，常用与存储不敏感的信息

• localStorage 是 HTML5 提供的一个 API，他本质上是一个hash（哈希表），是一个存在于浏览器上的 hash（哈希表）

  sessionStorage

• 浏览器会话缓存，关闭窗口或标签页会清空

  相同点：

1. 使用相同的API，localStorage与sessionStorage都可以使用以下的方法

   localStorage.setItem("key","value");      //以“key”为名称存储一个值“value”
   localStorage.getItem("key");             //获取名称为“key”的值
   localStorage.removeItem("key");           //删除名称为“key”的信息。
   localStorage.clear();                     //清空localStorage中所有信息

2. 存储容量：大部分浏览器每个域名的最大值都是5M

3. 都存储在客户端，不参与与服务器之间的通信

   区别：

4. 生命周期：

   1. localStorage：永不过期，需要手动清理
   2. sessionStorage：关闭页面或浏览器，就会清空数据
5. 有效区域：
   1. 相同域名的页面，能互相读取localStorage
   2. 相同域名，并且在同一页面，才能互相读取sessionStorage

      附：获取浏览器的localStorage容量

• 一个字符就是1b

  (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)
  })()