溫故js系列（3）-cookie優缺點&設置獲取刪除cookie

前端學習：教程&開發模塊化/規範化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源彙總

歡迎提issues斧正：cookie

JavaScript--cookie

cookie能夠像身份證同樣在客戶端請求服務器的時候肯定信息。也能夠在客戶端分擔服務端的壓力，作不少判斷和存儲信息。

cookie 優缺點

優勢：
1.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
2.控制cookie的生命期，使之不會永遠有效。就算被盜了偷盜者極可能拿到的是一個過時的cookie。
3.cookie幫助服務端承擔了很大的壓力，能夠利用cookie在和客戶端作不少判斷而不該通過服務端。
4.極高的擴展性和可用性，使用簡單，操做方法方便
缺點：
1.cookie數量和長度的限制。每一個cookie長度不能超過4KB，不然會被截掉。IE下每一個domain最多隻能有50條cookie（IE6是20條），Firefox最多50個cookie，chrome和Safari沒有作硬性限制，IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。
2.安全性問題。這是cookie一個隱患，若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。
3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。因此仍是有必定的侷限性。

設置cookie

通常主要設置cookie名字和值、cookie有效期、路徑、域名、是否安全傳輸。
原生方法：

document.cookie="key="+value;

封裝方法：

function setCookie(key, value, expires, path, domain, secure) {     
    var cookieText = encodeURIComponent(key) + '=' + encodeURIComponent(value);     
    if (expires instanceof Date) {         
        cookieText += '; expires=' + expires;     
    }     
    if (path) {         
        cookieText += '; expires=' + expires;     
    }     
    if (domain) {         
        cookieText += '; domain=' + domain;     
    }     
    if (secure) {         
        cookieText += '; secure';     
    }     
    document.cookie = cookieText; 
}

JQuery方法（JQuery沒有封裝cookie方法，須要下載基於JQuery的插件jquery.cookie.js）：

$.cookie('key','value',{
    expires：7,
    path：'/',
    domain: 'xxx.com',
    secure: false
});

獲取cookie

原生方法：

var cookieStr = document.cookie;  //cookieStr=='username=Xzavier;password=123456;sex=man'

這樣得到了全部的cookie，是一個字符串。根據須要選取，好比：

var username=document.cookie.split(";")[0].split("=")[1];
var password=document.cookie.split(";")[1].split("=")[1];

封裝方法：

function getCookie(key) {     
    var cookieName = encodeURIComponent(key) + '=';     
    var cookieStart = document.cookie.indexOf(cookieName);     
    var cookieValue = null;     
    if (cookieStart > -1) {         
        var cookieEnd = document.cookie.indexOf(';', cookieStart);         
        if (cookieEnd == -1) {             
            cookieEnd = document.cookie.length;         
        }         
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));     
    }     
    return cookieValue; 
}

JQuery方法：

$.cookie(‘key’); //value?value:null

刪除cookie

原生方法：

document.cookie = "key=value;expires=" + new Date(0); //時間能夠是如今以及如今以前

封裝方法：

function unsetCookie(key) {     
    document.cookie = key + "= ; expires=" + new Date(0); 
}

JQuery方法：

$.cookie(‘key’,null);

其餘參數設置：

$.cookie("key", value, {
    expires: new Date(0),
    path: '/',
    domain: 'xxx.com'
});

cookie在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，雖然有侷限性，可是不可替代的。使用的方法也很是簡單，但平時使用cookie的時候也須要多多注意安全性。

jquery.cookie.js下載：jquery.cookie.js
cookie弊端參考：cookie弊端