Preface

除了能用php方式操作cookie外,通過純js的方式也能操作它,當然兩者也可以配合使用了,這也算是伺服器端的php和客戶端的js的一種互動方式吧!
PS: 除了利用 COOKIE 進行資料互動外,還有一種是使用ajax進行資料互動 ^_^

本篇只介紹純js的方式操作cookie,如果喜歡用jquery,官方也有封裝好的cookie類供使用點我傳送(第一個顯示的就是了)

相關屬性 : document.cookie

用js操作cookie 大致分為三步: 讀/寫/刪
(1)讀

     string document.cookie
    //讀取cookie 返回整個cookie(型別是字串)
 

(2)寫(賦值)

    document.cookie="a=12";
    //a=12以鍵("a")值("12")對的形式寫入cookie中

(3)刪除

document.cookie="a=12;expires="+new Date().toGMTString();
//設定a變數的有效期為當前時間

(4)讀取的cookie都是一整個字串？那怎麼用？能不能像陣列那樣？
要自己用js將字串，切割成陣列……或者……..

1.setCookie()

寫入新的cookie 我們希望最好能給他一個過期時間exday,(預設是跟隨瀏覽器的)

程式碼實現:

function
 
 setCookie(name,value,exday)
    {
        //判斷傳入的引數是否至少為2個,return false otherwise
        if(value){
            //如果傳入了cookie過期時間exday就進入新增日期操作
            if(arguments[3]){
                var exday = exday*24*60*60*1000;
                document.cookie=name+"="+value+";expires="+(new Date().setTime(new Date
 
().getTime()+exday)).toGMTString();
                return document.cookie;
                //否則直接新增cookie的值
            }else{
                document.cookie=name+"="+value;
                return document.cookie;
            }
        }
        return false;
    }

getCookie()

需求:獲取cookie,由於document.cookie返回的是一個字串,這裡我使用強大的正則來匹配到我們需要獲取的name

程式碼實現:

function getCookie(name)
    {
        //思路分析:
        //先用document.cookie輸出一個cookie值觀察它的格式,,,假設有多個name  
        // 它的格式為 :    a=1; b=2; {......}z=n
        //分號與下一個name之間有一個空格,最後一個什麼也沒有
        //現在我們要通過name獲取它對應的值,
        //這個name的位置只有可能為第一個 或者前面是個空格,-----> /(^| )/
        //而這個name的後面必定跟上個/=/號 ------> /(name+"=...")/
        //=號後面直到遇到/;/或者結尾/$/的值就是我們需要的   /(;}$)/
        //由於值可能不存在所以用特殊符/*/
        //綜上即為 /(^| )"+name+"=([^;]*)(;|$)/
        var result = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
        if(result){
            //這就是使用match函式的原因,可以輕鬆獲取匹配到的括號中的內容
            //由於如果match有返回值,那麼返回的陣列的下標0對應的值為匹配到的全部字串,而我們需要的是第二個括號中的值
            return result[2];
        }else{
            return false;
        }
    }

3.delCookie()

原理:將cookie值的過期時間設定為過去時間

需求:刪除cookie可以是刪除cookie中某一個name或者刪除全部的cookie

程式碼實現 :

function delCookie(name)
    {
        //這裡我將空參的函式執行為 刪除所有的cookie
        if(arguments.length==0){
            //又用到了強大的正則,這個比上個更好理解
            //getCookie函式中我們需要獲取的是value,這次我們需要獲取的是name
            //思路分析 : 
            //只取cookie字元中的開頭部分遇到/=/號就停止匹配
            //將這部分用小括號記錄起來(內容即位我們需要的name)
            //為了以防萬一這裡添加了name中不能有/[^;]/號
            var del_name = document.cookie.match(new RegExp("(^[^;]*)="))
                //判斷是否匹配到了 ,cookie已經為空otherwise
                if(del_name){
                    //呼叫有參的delCookie函式刪除匹配到name
                    delCookie(del_name[1]);
                    //呼叫無參繼續刪除(遞迴思想)
                    delCookie();
                }
        }
        if(getCookie(name)){
            //將過期時間設定為當前時間,即過期了
             document.cookie=name+"="+getCookie(name)+";expires="+new Date().toGMTString();
             return true;
        }else{
            return false;
        }
    }

總結 : 如果涉及到與伺服器端互動,那麼只設置cookie的值是不行的.否則,如果後端為cookie設定了作用域,這個問題會導致cookie值無法正確刪除,這時我們就需要改進一下函式,將cookie路徑及域名操作加入.
ps由於本篇僅為學習js操作cookie提供思路幫助,對上述問題不會深入討論,有興趣的同學可以留言交流.

本文為原創,如需轉載請備註本出處,閉謝