javascript快速入門20--Cookie

水之原發表於2013-12-01
JavaScriptCookie

Cookie 基礎知識

我們已經知道，在 document 物件中有一個 cookie 屬性。但是 Cookie 又是什麼？“某些 Web 站點在您的硬碟上用很小的文字檔案儲存了一些資訊，這些檔案就稱為 Cookie。”—— MSIE 幫助。一般來說，Cookies 是 CGI 或類似，比 HTML 高階的檔案、程式等建立的，但是 JavaScript 也提供了對 Cookies 的很全面的訪問權利。

在繼續之前，我們先要學一學 Cookie 的基本知識。

每個 Cookie 都是這樣的：cookie名=cookie值；cookie本身僅僅是一個字串，是一組名值對；多組名值對用分號加空格分隔！

"cookie名"的限制與 JavaScript 的命名限制大同小異，少了“不能用 JavaScript 關鍵字”，多了“只能用可以用在 URL 編碼中的字元”。後者比較難懂，但是隻要你只用字母和數字命名，就完全沒有問題了。“值”的要求也是“只能用可以用在 URL 編碼中的字元”。

每個 Cookie 都有失效日期，一旦電腦的時鐘過了失效日期，這個 Cookie 就會被刪掉。我們不能直接刪掉一個 Cookie，但是可以用設定失效日期早於現在時刻的方法來間接刪掉它。

每個網頁，或者說每個站點，都有它自己的 Cookies，這些 Cookies 只能由這個站點下的網頁來訪問，來自其他站點或同一站點下未經授權的區域的網頁，是不能訪問的。每一“組”Cookies 有規定的總大小（大約 2KB 每“組”），一超過最大總大小，則最早失效的 Cookie 先被刪除，來讓新的 Cookie“安家”。

訪問Cookie

    document.write(document.cookie);//輸出類似"name1=value1; name2=value2; name3=value3"的字串
    document.write(typeof document.cookie);//cookie僅僅是個字串

 

但這樣獲取到的是一堆混亂的字串，必須對其進行處理才能知道它的含義！在類似ASP或PHP這樣的伺服器端指令碼中，往往設定cookie十分簡單

    //ASP
    response.cookies("cookieName")="cookieValue"
    //PHP
    setcookie("cookieName","cookieValue");

 

解析Cookie名值對

方案一：直接擷取字串

    function getCookie(cookieName) {
        var start = document.cookie.indexOf(cookieName+"=");
        if (start ==-1) {return "";}
        start = start+cookieName.length+1;
        var end = document.cookie.indexOf(";",start);
        if (end=-1) {end = document.cookie.length;}
        return document.cookie.substring(start,end);
    }

 

方案二：將Cookie拆分為陣列，通過遍歷取得

    function getCookie(cookieName) {
        var cookies=document.cookie.split("; ");//一個分號加一個空格
        if (!cookies.length) {return "";}
        var pair=["",""];
        for (var i=0;i< cookies.length;i++) {
            pair = cookies[i].split("=");//以賦值號分隔,第一位是Cookie名,第二位是Cookie值
            if (pair[0]==cookieName) {
                break;
            }
        }
        return pair[1];
    }

 

方案三：使用正規表示式解析

    function getCookie(cookieName) {
        var re = new RegExp("\\b"+cookieName+"=([^;]*)\\b");
        var arr =  re.exec(document.cookie);
        return arr?arr[1]:"";
    }

 

設定Cookie

一個Cookie包含以下資訊：

  • Cookie名稱，Cookie名稱必須使用只能用在URL中的字元，一般用字母及數字
  • Cookie值，Cookie值同樣也只能使用可以用在URL中的字元，一般需要在設定Cookie值時對其使用encodeURI方法進行轉義
  • Expires，過期日期，一個GMT格式的時間，當過了這個日期之後，瀏覽器就會將這個Cookie刪除掉，當不設定這個的時候，Cookie在瀏覽器關閉後消失
  • Path，一個路徑，在這個路徑下面的頁面才可以訪問該Cookie，一般設為“/”，以表示同一個站點的所有頁面都可以訪問這個Cookie
  • Domain，子域，指定在該子域下才可以訪問Cookie，例如要讓Cookie在bbs.x-life.com下可以訪問，但在news.x-life.com下不能訪問，則可將domain設定成bbs.x-life.com
  • Secure，安全性，指定Cookie是否只能通過https協議訪問，一般的Cookie使用HTTP協議既可訪問，如果設定了Secure（沒有值），則只有當使用https協議連線時cookie才可以被頁面訪問

注意：Cookie安全機制要求站點頁面只能訪問本站點的Cookie，不能訪問其它站點的Cookie。同時，最好在設定Cookie時使用encodeURI物件進行URI編碼，在取出Cookie時再使用decodeURI對其進行解碼！

設定一個完整Cookie示例

    var expires = new Date();
    expires.setMonth(expires.getMonth()+1);//一個月後Cookie失效
    document.cookie = "userName="+encodeURI("使用者名稱")+"; expires="+
    expires.toGMTString()+"; path=/; domain=x-life.com; secure";

 

每次設定document.cookie值時如果該Cookie名稱並不存在，則新增一個Cookie，如果已經存在，則修改以前的值！

    document.cookie ="a=1";//新增一個名稱為a的Cookie
    document.cookie = "b=2";//新增一個名稱為b的Cookie，原來的Cookie安然無恙
    document.cookie = "a=3";//將原來的名稱為a的Cookie值修改為3

 

setCookie函式

    function setCookie(name,value,expires,domain,secure) {
        var str = name+"="+encodeURI(value);//不要忘了在對應getCookie函式裡面加上decodeURI方法
        if (expires) {
            str += "; expires="+expires.toGMTString();
        }
        if (path) {
            str += "; path="+path;
        }
        if (domain) {
            str += "; domain="+domain;
        }
        if (secure) {
            str += "; secure";
        }
        document.cookie = str;
    }

 

刪除Cookie

沒有刪除Cookie的直接的方法，但可以變通一下來刪除Cookie！

    function delCookie(cookieName) {
        var expires = new Date();
        expires.setTime(expires.getTime()-1);//將expires設為一個過去的日期，瀏覽器會自動刪除它
        document.cookie = cookieName+"=; expires="+expires.toGMTString();
    }

 

相關文章