1.三者之间的区别
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
有期时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
2.设置、读取和删除cookie
(此处推荐一篇好贴:http://www.cnblogs.com/sy270321/p/4248961.html)
a.设置cookie值
//cookie是以键值对的形式保存的,即key=value的格式 document.cookie="userId=828"; document.cookie="userId=828; userName=hulk"; //如果要一次存储多个名/值对,可以使用分号加空格(; )隔开
在cookie 的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。在cookie的名中做到这点很容易,但要保存的值是不确定的。如何来存储这些值呢?方 法是用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,从而可以存储于cookie值中,而且使用此 种方案还可以避免中文乱码的出现。eg:
document.cookie="str="+escape("I love ajax");
当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值
设置cookie过期时间
<script language="JavaScript" type="text/javascript"> <!-- //获取当前时间 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(); //--> </script>
b.获取cookie
(1)获取某域名下的所有cookie
var strCookie=document.cookie;
(2)获取某域名下特定的cookie值(需自己拆分所有的cookie)
//获取cookie字符串 var strCookie=document.cookie; //将多cookie切割为多个名/值对 var arrCookie=strCookie.split("; "); //遍历cookie数组,处理每个cookie对 var username; for(var i=0;i<arrCookie.length;i++){ var arr=arrCookie[i].split("="); //找到特定的cookie,并返回它的值,此处以name为例 if("name"==arr[0]){ username=arr[1]; break; } }
c.删除cookie(将过期时间设置为过去的时间)
//获取当前时间 var date=new Date(); //将date设置为过去的时间 date.setTime(date.getTime()-10000); //将userId这个cookie删除 document.cookie="userId=828; expires="+date.toGMTString();
3.localStorage、sessionStorage
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");
getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
sessionStorage.removeItem("key");
localStorage.removeItem("site");
clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:
sessionStorage.clear();
localStorage.clear();
其他操作方法:点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }
storage事件
storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个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;}}