js cookie

前端技術發展突飛猛進，自從html5出來以後，就有不少一部分人當即轉投了webstorage的懷抱。在這個連天貓都捨棄了ie8的年代，ie8及如下終將被前端的執念所淘汰。

可是即使有了webstorage也不能忘記了陪伴了前端一路走來的cookie，何況，人家尚未被淘汰。

cookie的大多數知識均可以直接看w3school的網站上面找到。這是網址：http://www.w3school.com.cn/js/js_cookies.asp。

---

什麼是cookie?

cookie 是存儲於訪問者的計算機中的變量。每當同一臺計算機經過瀏覽器請求某個頁面時，就會發送這個 cookie。你可使用 JavaScript 來建立和取回 cookie 的值。

有關cookie的例子：

名字 cookie

        當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會存儲於 cookie 中。當訪問者再次訪問網站時，他們會收到相似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。

密碼 cookie

        當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被存儲於 cookie 中。當他們再次訪問網站時，密碼就會從 cookie 中取回。

日期 cookie

        當訪問者首次訪問你的網站時，當前的日期可存儲於 cookie 中。當他們再次訪問網站時，他們會收到相似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。

---

 

上面是對cookie的簡單介紹，下面會講述cookie如何使用。

首先，若是對cookie知識要求不高，只是想快速的上手，那麼徹底能夠直接使用jquery.cookie.js這個jquery插件來直接進行cookie的操做。（若是你想完全研究一下cookie的話絕大部分操做的時候，能夠研究一下人家的組件。代碼很少只有31行，能夠仔細的品味一下。）

而後，看一下w3school上cookie操做的代碼。

// 建立一個cookie
function setCookie (c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

上面是一個封裝好的新建cookie的方法，須要三個參數，cookie名稱、值、失效日期。咱們能夠很明顯的看到新建一個cookie其實等於就一句代碼，document.cookie = "名字" + escape(值) + ""或者失效日期的GMT字符串便可。

這裏出現了一個很重要的屬性expires，這個屬性表明當前名稱的cookie須要在何時清除。這個在後面刪除的時候還會出現。

 

// 獲取cookie的值
function getCookie (c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) {
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) 
                c_end=document.cookie.length;
            return unescape(document.cookie.substring(c_start,c_end));
        } 
    }
    return "";
}

這個是一個根據cookie字段名稱獲取值的方法。

這裏能夠先講一下cookie的組成狀況，獲取全部cookie可使用document.cookie來獲取，下面是一段我本身電腦上的cookie片斷：

firstGuide=true; name=neuscx; a=1; justForTry=1; needInfo={%22userName%22:%22neuscx%22%2C%22password%22:%22e10adc3949ba59abbe56e057f20f883e%22%2C%22rememberMe%22:true%2C%22token%22:%22%22}

能夠看到cookie是一段string類型的字符串，以"; "來將每個分割開來。因此須要本身進行拆分，簡單拆分可使用split("; ")來作到。上面代碼是用了兩次indexof判斷來判斷當前拆分出來的字符串中值在string中的具體位置所在。

具體解釋，先拼接 "name="這個字段，用indexof找到所在的index，這個位置日後加上name字段的長度，再加上1，就是value開始的位置。再從這個位置後開始尋找";"的位置，若是有就到該位置結束，沒有的話即爲最後一個。

經過這兩個index就能夠選取到value值，而後返回既好。

 

// 刪除相對應的cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime (exp.getTime() - 1);
    var cval = GetCookie (name);
    document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
}

在w3school上並無刪除cookie的具體講述，可是我在網上找了一下，貌似沒有直接刪除cookie的方法。也不能夠直接把那些字段刪除掉。這個是網上（比較）公認的方法，邏輯是將當前名字的cookie從新設置一下，將過時時間expires設爲當前時間-1，也就是當即失效。而後當前cookie就會消失，實現刪除效果。

 

cookie的大體知識就這麼多了，大體就是這麼使用的，歡迎指正。