前端開發中經過js設置cookie的一組方法

咱們在前端開發中，一般都須要獲取並記錄用戶的某些操做設置，這樣可使用戶下一次訪問網站時不用進行重複的調整設置同一個功能。

這次文章中的方法是在前端開發工做中本身隨手寫的一組經過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;
    }
}

 

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

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

key能夠理解爲cookie的變量名

val能夠理解爲這個cookie所帶有的值

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

 

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

key就是剛纔咱們設置時的cookie變量名

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

方法寫的不算複雜，比較適合前端開發新手使用。

 

如何調試與查看cookie？

cookie能夠經過某些瀏覽器的開發人員工具進行查看，本文暫以Chrome爲例。

打開頁面後，能夠經過 「右鍵-> 審查元素 ->resources」，而後以下圖中，設置了一個font-size爲例，能夠查看到變量名、值、和過時時間等信息