javascript中cookie与WEB存储

HTTP Cookie要求服务器对任意HTTP请求发送Set-Cookie，因此，Cookie的处理原则上需要在服务器环境下进行。当然，现在大部分浏览器在客户端也能实现Cookie的生成和获取。(目前Chrome不可以在客户端操作，其他浏览器均可)

cookie由名/值对形式的文本组成，完整格式为：name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]

document.cookie = 'user=' + encodeURIComponent('中文用户名'); //编码写入
alert(decodeURIComponent(document.cookie)); //解码读取

expires=date 失效时间，如果没有声明，则为浏览器关闭后即失效。声明了失效时间，那么时间到期后方能失效。

var date = new Date();
date.setDate(date.getDate() + 7); //设置相对当前天数的过期天数
document.cookie = "user= " + encodeURIComponent('用户名') +";expires=" + date;

想要删除cookie只要重新创建cookie把时间设置当前时间之前即可：date.getDate()-1或new Date(0)

path=path 访问路径，当设置了路径，那么只有设置的那个路径文件才可以访问cookie

domain=domain 访问域名，用于限制只有设置的域名才可以访问，那么没有设置，会默认限制为创建cookie的域名

设置域名，必须在当前域名绑定的服务器上设置，如果在服务器上随意设置其他域名，则会无法创建cookie

secure 安全设置，指明必须通过安全的通信通道来传输(HTTPS)才能获取cookie

document.cookie = "user= " + encodeURIComponent('用户名') + ";secure";

JavaScript设置、读取和删除并不是特别的直观方便，我们可以封装成函数来方便调用。

创建cookie：

function setCookie(name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date){cookieText += '; expires=' + expires;}
if (path) {cookieText += '; expires=' + expires;}
if (domain) {cookieText += '; domain=' + domain;}
if (secure) {cookieText += '; secure';}
document.cookie = cookieText;

}

获取cookie：

function getCookie(name) {

var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
    var cookieEnd = document.cookie.indexOf(';', cookieStart);
    if (cookieEnd == -1) {cookieEnd = document.cookie.length;}
    cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;

}

删除cookie：

function unsetCookie(name) {document.cookie = name + "= ; expires=" + new Date(0);}

cookie局限性：cookie虽然在持久保存客户端用户数据提供了方便，分担了服务器存储的负担。但是还有很多局限性的。

1：每个特定的域名下最多生成20个cookie(根据不同的浏览器有所区别，但为了兼容最好不要超过20个)
    1.IE6或更低版本最多20个cookie
    2.IE7和之后的版本最多可以50个cookie
    3.Firefox最多50个cookie
    4.Opera最多30个cookie
    5.Safari和Chrome没有做硬性限制
    当超过指定的cookie时，浏览器会清理掉早期的cookie。IE和Opera会清理近期最少使用的cookie，Firefox会随机清理cookie。
2：cookie的最大大约为4096字节(4k)，为了更好的兼容性，一般不能超过4095字节即可。
3：cookie存储在客户端的文本文件，所以特别重要和敏感的数据是不建议保存在cookie的。比如银行卡号，用户密码等。

其他存储：IE提供了一种存储可以持久化用户数据，叫做userData，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据存放在缓存中，如果缓存没有清理，那么会一直存在。

<div style="behavior:url(#default#userData)"></div>
addEvent(window, 'load', function () {
    var box = document.getElementById('box');
    box.setAttribute('name', encodeURIComponent('中文转码字符串')); //要保存的名/值对
    box.expires=表示过期的时间字符串(这里需要用toUTCString()方法把时间数据转换成字符串)
    box.save('bookinfo');//设置名称，通过该名称可以获取对应的名/值对
    //box.removeAttribute('name'); //删除userDate
    //box.save('bookinfo');
    box.load('bookinfo'); //通过该名称获取对应的名/值对
    alert(decodeURIComponent(box.getAttribute('name')));
});

这个数据文件也是保存在cookie目录中，只要清除cookie即可。如果指定过期日期，则到期后自动删除，如果没有指定就是永久保存。

Web Storage(Web存储)：在比较高版本的浏览器，JavaScript提供了localStorage和sessionStorage(在HTML5中提供了localStorage取代了globalStorage)，存储容量上根据浏览器不同各不相同，一般情况下为5M左右。

localStorage方法存储的数据没有时间限制，永久有效。

(1)localStorage.setItem(key,value) 或者 localStorage.key=value：添加本地存储数据。
(2)localStorage.getItem(key) 或者 localStorage.key:通过key获取相应的Value。
(3)localStorage.removeItem(key):通过key删除本地数据。
(4)localStorage.clear():清空所有数据。

localStorage.length返回当前本地数据存储的个数。

sessionStorage用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空。sessionStorage的使用方法和localStorage相似

(1)sessionStorage.setItem(key,value) 或者 sessionStorage.key=value：添加存储数据。
(2)sessionStorage.getItem(key) 或者 sessionStorage.key:通过key获取相应的Value。
(3)sessionStorage.removeItem(key):通过key删除数据。
(4)sessionStorage.clear():清空所有数据。

localStorage和sessionStorage和区别：

共同点：都是保存在浏览器端，且都遵循同源策略，都只能保存字符串类型的数据。

不同点：在于生命周期与作用域的不同

作用域：localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下

生命周期：localStorage 是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除；而 sessionStorage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。

说到底，Web Storage 是对 Cookie 的拓展，它只能用于存储少量的简单数据。当遇到大规模的、结构复杂的数据时，Web Storage 也爱莫能助了。这时候我们就要清楚我们的终极大 boss——IndexedDB！