【Javascript】——簡單cookie操作

weixin_34357887發表於2018-04-14
JavaScriptCookie

  cookie是web開發中常用的儲存技術，與其類似的還有localStorage、sessionStorage。這三者的差別可以閱讀【掘金】把cookie聊清楚,這篇文章詳細的說明了這三者的異同和使用注意事項。這裡來點乾貨，說說cookie的基本操作：設定cookie、獲取cookie和刪除cookie。
  1.設定cookie。 原生JS可以通過document.cookie來操作cookie。設定cookie主要包含三個引數：名稱、值、過期時間。我們用setCookie函式來設定cookie。

 var setCookie = function(name,value,expiretime){
	        expiretime = expiretime || 30;
	        var date = new Date();
	        date.setTime(date.getTime() + (expiretime*24*60*60*1000));
	        var expires = "expires="+date.toUTCString();
	        document.cookie = name + "=" + value + "; " + expires;
	    }
複製程式碼

設定cookie非常簡單，這裡設定了過期時間的單位是天，過期時間的的設定是“當前時間”+過期時間閾值，預設的閾值是30(天)。這裡的toUTCString() 方法可根據世界時 (UTC) 把 Date 物件轉換為字串，最後拼接成完整的cookie。
  2.獲取cookie。 cookie的獲取同樣可以通過document.cookie來獲取。如：

setCookie("name","TOM",30);
console.log(document.cookie);   //name=TOM
複製程式碼

上邊的結果可能會奇怪，為什麼設定了過期時間，卻沒有獲取到呢？其實過時時間已經設定好了，可以通過F12 ==>Aplication ==> Cookies中檢視。

  當我們設定多個cookie時，獲取結果是怎樣呢？

setCookie("name","TOM");
setCookie("age",12);
console.log(document.cookie)   // name=TOM;age=12
複製程式碼

獲取的結果是cookie所有cookie的字串。這樣的結果並不令人滿意，如果可以通過類似鍵值對的形式獲取就好了。getCookie函式就做了這件事。

var getCookie = function(name) {
            var storage = document.cookie;
            storage = storage.split(";");
            var cookieValue = {};
            storage.forEach(element => {
                let temp = element.split("=");
                cookieValue[`${temp[0]}`] = temp[1]
            });

            return name ? cookieValue[name]:cookieValue;
        },
複製程式碼

首先把所有cookie儲存起來，然後將其分割成陣列，因為我們想要的到物件的形式，所以定義一個物件作為返回值，遍歷storage陣列，將每一個cookie依據“=”分割，分割後的每個元素是一個包含名稱和值的陣列，然後將陣列轉換成物件返回。這裡的返回值會根據傳入的name(cookie的“鍵”)來判斷返回的是指定的值還是所有的cookie，也就是說，當傳入name引數時，獲取的是name名稱的cookie的值，省略引數時，獲取所有的cookie物件。

setCookie("name","TOM");
setCookie("age",12);

console.log(getCookie(name));    // TOM
console.log(getCookie())   // {"name":"TOM","age":"12"}
複製程式碼

  3.刪除Cookie。 刪除cookie非常簡單，只需讓對應的cookie的有效期小於當前時間即可。deleteCookie實現的方法與getCookie一樣，可以刪除指定cookie或者刪除全部cookie。

var deleteCookie = function (name){
            if(name){
                tool.setCookie(name,"",-1)
            }
            else{
                let cookies = getCookie();
                Object.keys(cookies).forEach(element=>{
                    setCookie(element,"",-1);
                })
            }
        }
複製程式碼

刪除cookie用到了getCookie和setCookie，這裡設定cookie為負數，當expires為負數時，表示cookie為臨時資料，這樣就達到了刪除cookie的目的。同樣，傳入引數，刪除指定cookie，省略參數列示刪除所有cookie。   到此，簡單的cookie操作就完成了。Github傳送門

相關文章