localStorage、sessionStorage、Cookie的区别及用法

1、web Storage

web Storage 是HTML 5引入的一个重要的功能，它可以在客户端本地存储数据，类似cookie。webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。但是cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：（localStorage和sessionStorage具有相同API）

    setItem (key, value) ——  保存数据，以键值对的方式储存信息。

    getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    clear () ——  删除所有的数据

    key (index) —— 获取某个索引的key

1.1 localStorage

localStorage生命周期是永久，除非手动清除，否则这些信息将永远存在，不参与和服务器的通信。localStorage有length属性，可以查看其有多少条记录的数据。

     var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null

         }

1.2 sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。

1.3 sessionStorage 和 localStorage 区别

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
*这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据*
如果A页面含有超链接可以点击进入B页面，他们也是可以共享sessionStorage的。

1. Cookie

生命期在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

cookie的优点：具有极高的扩展性和可用性

1. 通过良好的编程，控制保存在cookie中的session对象的大小。
2. 通过加密和安全传输技术，减少cookie被破解的可能性。
3. 只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失。
4. 控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie。

cookie的缺点：

 1. cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB。否则会被截掉。
 2. 安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用
 3. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若把计数器保存在客户端，则起不到什么作用。

localStorage、sessionStorage、Cookie共同点：都是保存在浏览器端，且同源的。
本文整理自其他网友，仅供个人学习使用