【轉】分享前端開發中通過js設置/獲取cookie的一組方法

在前端開發中，通常都需要獲取並記錄用戶的某些操作設置，這樣可以使用戶下一次訪問網站時不用進行重復的調整設置同一個功能。

js方法的完整代碼如下：

var cookie = {
    set:function(key,val,time){//設置cookie方法
        var date=new Date(); //獲取當前時間
        var expiresDays=time;  //將date設置為n天以后的時間
        date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化為cookie識別的時間
        document.cookie=key + "=" + val +";expires="+date.toGMTString();  //設置cookie
    },
    get:function(key){//獲取cookie方法
        /*獲取cookie參數*/
        var getCookie = document.cookie.replace(/[ ]/g,"");  //獲取cookie，並且將獲得的cookie格式化，去掉空格字符
        var arrCookie = getCookie.split(";")  //將獲得的cookie以"分號"為標識 將cookie保存到arrCookie的數組中
        var tips;  //聲明變量tips
        for(var i=0;i<arrCookie.length;i++){   //使用for循環查找cookie中的tips變量
            var arr=arrCookie[i].split("=");   //將單條cookie用"等號"為標識，將單條cookie保存為arr數組
            if(key==arr[0]){  //匹配變量名稱，其中arr[0]是指的cookie名稱，如果該條變量為tips則執行判斷語句中的賦值操作
                tips=arr[1];   //將cookie的值賦給變量tips
                break;   //終止for循環遍歷
            } 
        }
        return tips;
    }
}

代碼中已經加入了注釋，因此某些個別數值需要調整的話，可以自行修改代碼。當然了，如果多加一兩個參數也不是不可以，自行發揮吧。

 

下面簡單的說明一下設置與獲取的方法，便於前端開發新手用戶使用：

1.設置cookie的方法為：cookie.set(key,val,time)

key可以理解為cookie的變量名

val可以理解為這個cookie所帶有的值

time是cookie的超時時間，單位為天

2.獲取cookie的方法為：cookie.get(key)

key就是剛才我們設置時的cookie變量名

我們只需要將函數賦值給新的變量即可調用這個值，例如：var n = cookie.get(key);

如何調試與查看cookie？

cookie可以通過某些瀏覽器的開發人員工具進行查看，本文暫以Chrome為例。

打開頁面后，可以通過 “右鍵-> 審查元素 ->resources”，然后如下圖中，設置了一個font-size為例，可以查看到變量名、值、和過期時間等信息

-------------------本寶寶再補充一丟丟-----------------------

1.關於設置或獲取瀏覽器cookie（簡而言之）　

　　var cookies = document.cookie; //讀取
　　document.cookie["Key"]="值"; //設置

2.關於在chrome中查看Cookie有個簡便的方法，如下圖：

-------------------------------補充完畢-------------------------------

 

轉載原文鏈接 http://www.frontopen.com/1943.html

轉載出處   品味人生 2014年03月02日 於 前端開拓者 發表