sessionStorage & localStorage & cookie

概念

• html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
• sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
• localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• Cookie指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。

用途

• sessionStorage
• localStorage
• Cookie: 服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息，以判断在HTTP传输中的状态。Cookies最典型的应用是判定注册用户是否已经登录网站，用户可能会得到提示，是否在下一次进入此网站时保留用户信息以便简化登录手续，这些都是Cookies的功用。另一个重要应用场合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品，这些信息都会写入Cookies，以便在最后付款时提取信息。

特点

• 内存大小 :
  • 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
  • localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
• 存储位置 : cookie是在客户端保存的方案.而session是在服务端保存的方案.
• 生命周期 :
  • localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在
  • sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
  • cookie是在客户端保存的方案.而session是在服务端保存的方案.如果cookie不设定时间的话就表视它的生命周期为浏览器会话的期间,只要关闭IE,cookie就消失了这种cookie被称为会话cookie.其一般不保存在硬盘上.而是保存在内存中.如果设置了过期时间.那么浏览器会把cookie保存到硬盘中,再次打IE时会依然有效.直到它的有效期超时;注:存储在硬盘中的cookie可以在不同IE间共享;
• 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
• 他们均只能存储字符串类型的对象

操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

存储 setItem

用途：将value存储到key字段

用法：.setItem( key, value)

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

获取 getItem

用途：获取指定key本地存储的值

用法：.getItem(key)

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

删除 removeItem

用途：删除指定key本地存储的值

用法：.removeItem(key)

sessionStorage.removeItem("key");
localStorage.removeItem("site");

清空 clear

用途：清除所有的key/value

用法：.clear()

sessionStorage.clear();
localStorage.clear();