cookie，sessionStorage 和 localStorage

1.三者之间的区别

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
   cookie数据大小不能超过4k。
   sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
    localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
    sessionStorage  数据在当前浏览器窗口关闭后自动删除。
    cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

2.设置、读取和删除cookie

（此处推荐一篇好贴：http://www.cnblogs.com/sy270321/p/4248961.html）

a.设置cookie值

//cookie是以键值对的形式保存的，即key=value的格式
document.cookie="userId=828";
document.cookie="userId=828; userName=hulk"; //如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开

在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方 法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示,从而可以存储于cookie值中，而且使用此 种方案还可以避免中文乱码的出现。eg:

document.cookie="str="+escape("I love ajax");

当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值

设置cookie过期时间

<script language="JavaScript" type="text/javascript">
<!--
//获取当前时间
var date=new Date();
var expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString();
//-->
</script> 

b.获取cookie

（1）获取某域名下的所有cookie

var strCookie=document.cookie; 

（2）获取某域名下特定的cookie值（需自己拆分所有的cookie）

//获取cookie字符串
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");
//遍历cookie数组，处理每个cookie对
var username;
for(var i=0;i<arrCookie.length;i++){
    var arr=arrCookie[i].split("=");
    //找到特定的cookie，并返回它的值，此处以name为例
    if("name"==arr[0]){
        username=arr[1];
        break;
    }
} 

c.删除cookie（将过期时间设置为过去的时间）

//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expires="+date.toGMTString(); 

3.localStorage、sessionStorage

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

localStorage和sessionStorage的方法

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还提供了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;}}