cookie、sessionStorage、localStorage

以前只知道cookie、sessionStorage、localStorage的一些存储量，过时时间上的区别，今天仔细研究了一下它们用法上的区别。

cookie

cookie的本质是在绑定的特定的域名下的。当服务器发送的HTTP响应头中包含cookie会话信息时（{key,value}形式），浏览器会保存这样的会话信息，并在再次给建立它的域名发送请求时，都会包含这个cookie。这个限制确保了储存在cookie中的信息只能让批准的接受者访问，而没法被其余域访问。

JavaScript中的cookie

在JavaScript中操做cookie有点复杂，由于只有BOM的document.cookie属性，返回页面可用的全部cookie的字符串，一系列有逗号分隔开的键值对。
document.cookie属性能够设置新的cookie字符串，并不会覆盖cookie，除非cookie的名称已经存在。

cookie中全部的名字和值都是通过URL编码的，因此必须使用decodeURIComponent()来解码。

因为JavaScript中读写cookie不够直观，因此须要封装一些方法来方便cookie的操做。例如：读、写、删除操做。

设置cookie:

function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
}

读取cookie

function getCookie(name) 
{ 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); 
　　 return (arr=document.cookie.match(reg))?unescape(arr[2]):null;
}

删除cookie
function delCookie(name)
{

var exp = new Date(); 
exp.setTime(exp.getTime() - 1); 
var cval=getCookie(name); 
if(cval!=null) 
    document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

这样封装起来就很方便使用啦！

sessionStorage和localStorage

sessionStorage和localStorage都是在HTML5中提出的，都是以window对象属性的形式存在，用来在客户端存储会话数据。
sessionStorage和localStorage都是Storage类型的实例。因此它们有clear()、getItem(name)、key(index)、removeItem（name）、setItem(name，value)方法。

sessionStorage对象存储特定于某个会话的数据，也就是该数据只保存到浏览器关闭。localStorage属于永久性存储。切它们的存储量也大于cookie，因浏览器而已，基本能够达到有5M。

sessionStorage和localStorage只能存储字符串类型数据，没法直接存储数组类型和JSON对象，若是有需求该怎样作呢？其实也很简单。首先将JSON对象经过JSON.stringify()方法转换成字符串，再存储到sessionstorage中，而后经过JSON.parse()方法将字符串转换成JSON格式便可。