cookie和sessionStorage 、localStorage 對比

相同點：都存儲在客戶端

不一樣點：1.存儲大小

cookie數據大小不能超過4k。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

2.有效時間

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。

cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

3. 數據與服務器之間的交互方式

cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

cookie操做

JS設置cookie

document。cookie="name="+username;

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();  
}

讀取cookies

1.使用正則表達式

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

2.截取字符串讀取cookie

function getCookie(key) {
    var data = document.cookie;
    var findStr = key + "=";
//找到key的位置
    var index = data.indexOf(findStr);
    if (index == -1)
        return null;
    var subStr = data.substring(index +findStr.length);
    var lastIndex = subStr.indexOf(";");
    if (lastIndex == -1) {
        return subStr;
    } else {
        return subStr.substring(0,lastIndex);
    }
}    

3.使用正則表達式+JSON

function getCookie(key) {
    return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim,         "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}

清除Cookie

function deleteCookie(name) {

　　var expdate = new Date(); 　　expdate.setTime(expdate.getTime() - (86400 * 1000 * 1)); 　　setCookie(name, "", expdate); }