“Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。在页面刷新后（对于 sessionStorage）甚至浏览器完全重启（对于 localStorage）后，数据仍然保留在浏览器中。这就是HTML5本地存储。”

Cookie

说到浏览器里的数据存储，很多人会想到cookie。Cookie表示在HTTP服务器和客户间传递的状态信息，是一个记录信息的小小文本文件，可以实现记录用户个人信息的功能。

Cookie的数量以及大小有严格限制，各个浏览器的域名cookie限制也不同，像 Firefox 限制每个域最多 50 个 cookie。大多数浏览器都有大约 4096B（加减 1）的长度限制。以此看来，cookie能存储的信息量不是很多，不适用于大量信息的存储。其次，cookie的使用也是比较麻烦的（对比接下来要讲到的本地存储来说），可以简单得看一看菜鸟教程的例子：

因为cookie格式是字符串形式，用 ；去分隔不同的值，所以从菜鸟官网的代码来看，取cookie里的特定值还需要先分割字符串再判断对比key。

最后，在 cookie 中存储大量信息会影响到特定域的请求性能。cookie 信息越大，完成对服务器请求的时间也就越长。

不是一顿狂踩cookie，只是为了衬托出下文的主角们哟~

HTML5的数据存储

Web Storage 的出现，是克服由 cookie 带来的一些限 制。当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage 的两个主要目标是：

• 提供一种在 cookie 之外存储会话数据的途径；
• 提供一种存储大量可以跨会话存在的数据的机制。

Storage

作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能。

sessionStorage和localStorage都是Storage的实例对象。Storage的主要方法有如下：

  length   //保存数据数目
  clear()   //清空数据
  setItem(key,value)   //新增数据 
  getItem(key)   //根据key获取值
  removeItem(key)   //删除
  key(index)   //根据下标获取值

对数据的操作除了可以用提供的方法，也可以通过类对象方式访问操作，详见下文的代码。

sessionStorage 对象

sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。也就是说，它只是伴随着session，窗口一旦关闭，就没了。

最常见的应用场景有，我点击了网页里的某个链接，链接的字体颜色就变了，就算我刷新了页面，那个链接的字体还是显示着表示这个页面被点击过的颜色。

sessionStorage作为Storage实例，对数据的操作如以下代码：

    //使用方法存储数据
    sessionStorage.setItem("name", "QQi");
    //类对象方式  使用属性存储数据 
    sessionStorage.person = "QQi"; 
    //使用方法读取数据
    let name = sessionStorage.getItem("person");
    console.log(name)  //QQi
    //类对象方式 使用属性读取数据
    let name = sessionStorage.person; 
    console.log(name) //QQi
    //使用 delete 删除一个值——在 WebKit 中无效
    console.log(sessionStorage.name) //QQi
    delete sessionStorage.name;
    console.log(sessionStorage.name)  //undefined
    //使用方法删除一个值
    let a = sessionStorage.removeItem("name"); 
    console.log(a)  //undefined 

localStorage 对象

localStorage 对象在修订过的 HTML 5 规范中作为持久保存客户端数据的方案取代了 globalStorage。在网站中的各页面想操作同一个localStorage对象，必须是同一域名、同一协议、同一端口的。

localStorage它通过磁盘缓存，数据不会自动清除，除了手动在浏览器清除缓存，或者写代码删除。所以关闭浏览器后，sessionStorage会被清除，localStorage不会。所以，用local Storage存储的数据，在第二次打开页面的时候，还能被看见。 图 ?浏览器里的开发者工具查看localStorage

作为Storage实例，对数据的操作实现如以下代码：

    //使用方法存储数据
    localStorage.setItem("name", "QQi");
    //类对象方式 使用属性存储数据
    localStorage.name = "QQi";
    //使用方法读取数据
    let name = localStorage.getItem("name");
    console.log(name)  //QQi
    // 类对象方式 使用属性读取数据
    let name2 = localStorage.name; 
    console.log(name)  //QQi
    //使用方法删除一个值
    let a = localStorage.removeItem("name"); 
    console.log(a)//undefined
    //使用 delete 删除一个值——在 WebKit 中无效
    delete localStorage.name;
    console.log(localStorage.name)  //undefined  如果打印name，还是能输出QQi

其实我发现一点，就算我在删除数据代码后打印被删除的键值对，比如在删除代码后打印name，如console.log(name)，值还是能照样打印出来！我刚开始疑惑了不久。后来发现必须要带localStorage或者sessionStorage修饰才能表明访问的是本地存储着的变量。 我只是删除了localStorage中的某个键值对，内存里还保存着一份键值对的变量。（个人的思考理解?）

由于存储对象是不可迭代的（对象都不可迭代），不能使用迭代方法，我们需要像遍历数组一样遍历存储对象，才能把所用值都打印出来。

为了避免在打印对象时把对象原型自带的键值打印出来，遍历的时候可以做个判断来滤掉原型中的字段：

 for(let key in localStorage) {
      if (!localStorage.hasOwnProperty(key)) {
      continue; // 跳过像 "setItem"，"getItem" 等这样的键
   }
     console.log(`${key}: ${localStorage.getItem(key)}`);
  }

其他

Web存储对象的存储大小限制为 5MB+，比起cookie的大得多了。

HTML5本地存储只能存储字符串，任何格式存储的时候都会被自带转换为字符串，读取的时候也需要进行类型转换。