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;}}