cookie、sessionStorage和localStorage的区别和使用

对比

-	cookie	sessionStorage	localStorage
生命周期	不设置时长，持续到浏览器关闭，设置时长，时长范围内有效	浏览器关闭	一直存在，直到删除或清除缓存
大小	4KB	5MB	5MB
范围	所有同源窗口	建立时的浏览器窗口	所有同源窗口
与服务器通信	http头中，每次请求都会传送到服务器	仅在客户端	仅在客户端

cookie和session都是用来跟踪浏览器用户身份的会话方式。
cookie

• cookie的内容主要包括：名字、值、过期时间、路径和域，路径与域一起构成cookie的作用范围。
• 若不设置过期时间，cookie一般不存储在硬盘而是保存在内存里，这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失，也被称为会话cookie。
• 若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。

session

• 当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。
• 如果有sessionid，服务器将根据该id返回对应session对象。
• 如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。

通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。
如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后

WebStorage分为两种：
sessionStorage：

• 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage：

• 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

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

function testCookie()
{
	var user=getCookie("username");
	if (user!="")
	{
		alert("Welcome again " + user);
	}
	else 
	{
		user = prompt("Please enter your name:","");
		if (user!="" && user!=null)
		{
			setCookie("username",user,365);
		}
	}
}

sessionStorage

设置sessionStorage值

sessionStorage.setItem("key", "value");

读取sessionStorage值

sessionStorage.getItem("key");

删除sessionStorage值

sessionStorage.removeItem("key");

清除sessionStorage所有的值

sessionStorage.clear();

localStorage

设置localStorage值

localStorage.setItem("key", "value");

读取localStorage值

localStorage.getItem("key");

删除localStorage值

localStorage.removeItem("key");

清除localStorage所有的值

localStorage.clear();

引用

资料参考
cookie、sessionStorage和localStorage的区别
cookies、session、sessionStorage和localStorage解释及区别