cookie、session、localstorage

最早的Cookies问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。

一、cookie机制和session机制的区别

　　具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。

　　同时我们也看到，由于在服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制来达到保存标识的目的，但实际上还有其他选择。

二、会话cookie和持久cookie的区别

　　如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。这种生命期为浏览会话期的cookie被称为会话      cookie。会话cookie一般不保存在硬盘上而是保存在内存里。

　　如果设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie依然有效直到超过设定的过期时间。

　　存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。

 

cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

三、设置cookie

1、每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：document.cookie="userId=828";

2、如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开：document.cookie="userId=828; userName=hulk";

3、主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制：document.cookie="name=value;domain=.google.com";

这样，所有google.com下的主机都可以访问该cookie。

4、给cookie设置终止日期，未设置终止日期，所有的cookie都是单会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。

document.cookie="userId=828; expiress=GMT_String";

 

Session的生命周期 

　　Session存储在服务器端，一般为了存储在服务器的内存中（为了高速存取），Sessinon在用户访问第一次访问服务器时创建，需要注意只有访问JSP、Servlet等程序时才会创建Session，只访问HTML、IMAGE等静态资源并不会创建Session，可调用request.getSession(true)强制生成Session。

　　Session什么时候失效？

　　1. 服务器会把长时间没有活动的Session从服务器内存中清除，此时Session便失效。Tomcat中Session的默认失效时间为20分钟。

　　2. 调用Session的invalidate方法。

　　Session对浏览器的要求：

　　虽然Session保存在服务器，对客户端是透明的，它的正常运行仍然需要客户端浏览器的支持。这是因为Session需要使用Cookie作为识别标志。HTTP协议是无状态的，Session不能依据HTTP连接来判断是否为同一客户，因此服务器向客户端浏览器发送一个名为JSESSIONID的Cookie，它的值为该Session的id（也就是HttpSession.getId()的返回值）。Session依据该Cookie来识别是否为同一用户。

localStorage支持的情况如上图

在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。

 

if(window.localStorage){

 alert('This browser supports localStorage');

}else{

 alert('This browser does NOT support localStorage');

}

 

存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：

 

localStorage.a = 3;//设置a为"3"

localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值

localStorage.setItem("b","isaac");//设置b为"isaac"

var a1 = localStorage["a"];//获取a的值

var a2 = localStorage.a;//获取a的值

var b = localStorage.getItem("b");//获取b的值

localStorage.removeItem("c");//清除c的值

 

这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：

 

var storage = window.localStorage;

function showStorage(){

 for(var i=0;i<storage.length;i++){

  //key(i)获得相应的键，再用getItem()方法获得对应的值

  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");

 }

}

需要注意的是，HTML5本地存储只能存字符串

 

HTML5的本地存储，还提供了一个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;}

 //showStorage();

}

 

对于事件变量e，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化，如下表：

目前浏览器对这个支持不太好，仅iPad和Firefox支持，而且Firefox支持得乱糟糟，e对象根本没有那些属性。iPad支持非常好，用的是e.uri（不是e.url），台式机上的Safari不行，诡异。

 

目前javascript使用非常多的json格式，如果希望存储在本地，可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式