cookie、session、webStorage(localStrorage、sessionStorage)

总概要：

(1) Cookies是保存在客户端的小段文本，随客户端请求发送该url下的所有cookies到服务器端，在浏览器和服务器间来回传递。大小4kb限制。同源共享。有效期为expire之前。

(2) Session则保存服务器段，通过唯一的值sessionID来区别每一个用户。SessionID随每个请求发送到服务器，服务器根据sessionID来识别客户端，再通过session 的key获取session值。SessionID传回服务器的实现方式可以通过cookies和url回写来实现。

Web Storage有两种形式：LocalStorage（本地存储）和sessionStorage（会话存储）。数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据，大概5M左右。

(3) sessionStorage（会话存储）是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。

(4) localStorage（本地存储）始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）。

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。

区别：

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
Web Storage
支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的
api 接口使用更方便。

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

有了对上面这些差别的直观理解，我们就可以讨论三者的应用场景了。
因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie
来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了~
而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage
的作用就发挥出来了。
详细描述：
Web Storage与cookie

Web Storage：更大容量存储，拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

Web Storage带来的好处：

减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

cookie：大小受限，每次请求一个新的页面的时候Cookie都会被发送过去，无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

总而言之，cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

Web Storage包括了两种存储方式：sessionStorage和localStorage

sessionStorage：用于本地存储一个会话（session）中的数据，仅仅是会话级别的存储，并非持久化的本地存储，不同页面或标签页间无法共享（顶级窗口）sessionStorage的信息，同源的同窗口（或tab）中，始终存在的数据。

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口，即同源）。

共同点：具有相同的操作方法，例如setItem、getItem和removeItem等：

setItem存储value

用途：将value存储到key字段

用法：.setItem( key, value)

代码示例：

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

getItem获取value

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

用法：.getItem(key)

代码示例：

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

removeItem删除key

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

用法：.removeItem(key)

代码示例：

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

clear清除所有的key/value

用途：清除所有的key/value

用法：.clear()

代码示例：

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

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.localStorage; for (var i=0, len = storage.length; i  <  len; i++){     var key = storage.key(i);     var value = storage.getItem(key);     console.log(key + "=" + value); }

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){ 	window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ 	window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ 	if(!e){e=window.event;}	 }