cookie，localStorage和sessionStorage区别

基本概念

cookie

cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。你可以使用JavaScript来创建和取回cookie的值。

cookie分为会话cookie和持久cookie，会话cookie是指在不设定它的生命周期expires时的状态，前面说了，浏览器的开启和关闭就是一次会话，而关闭浏览器时，会话cookie就会随着浏览器销毁。而关闭一个页面时，不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时，单一的买卖过程，离开之后，信息则销毁。

持久cookie则是设定了它的生命周期expires，此时，cookie像商品一样，有个保质期，关闭浏览器之后，它不会销毁，直到设定的过期时间。对于持久cookie，可以在同一个浏览器中传递数据，比如，你在打开一个淘宝页面登陆后，你在点开一个商品页面，依然是登录状态，即便你关闭了浏览器，再次开启浏览器，依然会是登录状态。这就是因为cookie自动将数据传送到服务器端，在反馈回来的结果。持久cookie就像是我们办理了一张积分卡，即便离开，信息一直保留，直到时间到期，信息销毁。（当设置生命周期后，关闭浏览器在打开，此时用document.cookie会显示为空，但是火狐中，右击-》查看页面信息-》安全-》查看cookie 会看到自己保存的cookie和过期时间）。

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于cookie中。当访问者再次访问网站时，他们会收到类似“Welcome Jaconb”的欢迎词。而名字则是从cookie中取回的。这通常就是通过cookie中存入一段辨别用户身份的数据来实现的。

在HTML5之前，这些都是由cookie完成的。但是cookie不适合大量的数据存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。

运用实例：

名字 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie

当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

设置cookie

function setCookie( cname, cvalue, exdays ) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + '=' + cvalue + ';' + expires;
}

获取cookie值

function getCookie (cname) {
	var name = cname + "=";
	var ca = document.cookie.split(";");
	for (var i = 0; i < ca.length;i++) {
	    var c = ca[i].trim();
	    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
	}
	return "";
}

给cookie设置终止时间

例如：如果要将cookie设置为10天后过期，可以这样实现。

//获取当前时间
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();

其中GMTString是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示过期时间，超过这个时间，cookie将消失，不可访问。

封装cookie方法，js操作cookie操作类封装

var cookie = {
			setCookie: function( cname, cvalue, exdays ) {
				var d = new Date();
				d.setTime(d.getTime() + (exdays*24*60*60*1000));
				var expires = 'expires=' + d.toGMTString();
				document.cookie = cname + '=' + cvalue + ';' + expires;
			},
			getCookie: function (cname) {
				var i,
					name = cname + '=';
					cookies = (document.cookie).split(';');
				for ( i = 0; i < cookies.length; i++) {
					var options = cookies[i].trim();
					if (options.indexOf(cname) !== -1) {
						return options.substring(name.length, options.length);	
					}
				}
				return "";
			},
			deleteCookie: function (cname) {
				var d = new Date();
				d.setTime(d.getTime() - 1000);
				var expires = 'expires=' + d.toGMTString();
				document.cookie = cname + '=v' + ';' + expires;
			}
		};

注意：chrome处于安全性考虑不能设置本地cookie，导致document.cookie=""这样的语法都失效的（其他浏览器可以）。需要放在服务器上才会生效。

在HTML5之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率不高。

在HTML5中提供了两种在客户端存储数据的新方法：

sessionStorage

为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。

localStorage

同样的功能，但是在浏览器关闭，然后重新打开后，除非数据被清除，否则依然存在。