前端基礎（七）：cookie操做

時間 2019-12-06

標籤前端基礎 cookie 欄目 HTML 简体版

原文原文鏈接

字數：1293跨域

閱讀時間：5分鐘瀏覽器

##簡介安全

cookie語法：微信

Cookie:<cookie-list>cookie

Cookie:name=value;dom

Cookie:name=value; name1=value1; name2=value2函數

在使用cookie以前，咱們先清晰一個概念：cookie是http請求的請求首部屬性之一，是經過服務端或者腳本設置的保存於瀏覽器客戶端中的信息。若是用戶手動在瀏覽器中設置了禁用cookie，咱們就沒法使用它了。測試

它的語法就是一系列的名稱值對用=操做符鏈接，而後每一對名稱值對之間使用分號+空格隔開。this

因瀏覽器同源策略，咱們是沒法跨域操做cookie的。.net

咱們會用它存儲一些簡單的臨時的信息，例如登陸令牌。

##JS中操做cookie

在JS中，咱們能夠經過document全局對象提供的接口來操做cookie。

語法：

let strCookies = document.cookie; //獲取cookie

document.cookie = strCookies; //更新cookie

strCookies的值就是上述的cookie語法形式。不過屬性值後面能夠跟上以下配置數據，使用分號爲分隔。

-;path=path配置cookie的路徑，默認爲當前文檔的路徑。document.cookie能夠獲取到當前路徑和子路徑的信息。

-domain=domain配置cookie的域名，默認爲當前域。document.cookie沒法獲取不一樣域的信息。

-max-age=max-age-in-seconds設置當前cookie的保留時間，單位爲妙，默認cookie會在當前會話關閉（即瀏覽器關閉）時失效。

-expires=date-in-GMTString-format設置當前cookie保留到哪一個時間點，接收GMTString的日期格式數據，默認cookie會在當前會話關閉（即瀏覽器關閉）時失效。

-;secure設置cookie在https時才生效。

這裏，咱們要注意一下幾點：

①cookie的值中是不容許出現任何逗號、分號或空格，因此cookie值可使用encodeURIComponent()來轉換一次。

②max-age是在http1.1中用來取代expires出現的新屬性，ie9如下不支持max-age。當同時存在max-age和expires時，會自動忽略掉expires。所以，這裏建議兩個屬性都維護一下。

下面，咱們引用MDN中的一個操做cookie的示例爲例，嘗試一下cookie的正確操做方式。

var CookieOper = {
    /**
     * 獲取cookie值
     * @param  {String} sKey cookie名稱
     * @return {String}      cookie值
     */
    getItem: function (sKey) {
        if (!sKey) { return null; }
        return decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1')) || null;
    },
    /**
     * 設置cookie值
     * @param {String} sKey    cookie名稱
     * @param {String} sValue  cookie值
     * @param {Number|String|Date} vEnd    保留時間
     * @param {String} sPath   路徑
     * @param {String} sDomain 域
     * @param {Boolean} bSecure 是否開啓安全協議
     */
    setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
        if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
        var sExpires = '';
        if (vEnd) {
            switch (vEnd.constructor) {
            case Number:
                sExpires = vEnd === Infinity ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' : '; max-age=' + vEnd;
                break;
            case String:
                sExpires = '; expires=' + vEnd;
                break;
            case Date:
                sExpires = '; expires=' + vEnd.toUTCString();
                break;
            }
        }
        document.cookie = encodeURIComponent(sKey) + '=' + encodeURIComponent(sValue) + sExpires + (sDomain ? '; domain=' + sDomain : '') + (sPath ? '; path=' + sPath : '') + (bSecure ? '; secure' : '');
        return true;
    },
    /**
     * 刪除cookie
     * @param  {String} sKey    cookie名稱
     * @param  {String} sPath   路徑
     * @param  {String} sDomain 域
     */
    removeItem: function (sKey, sPath, sDomain) {
        if (!this.hasItem(sKey)) { return false; }
        document.cookie = encodeURIComponent(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT' + (sDomain ? '; domain=' + sDomain : '') + (sPath ? '; path=' + sPath : '');
        return true;
    },
    /**
     * 是否擁有對應名稱的cookie
     * @param  {String}  sKey cookie名稱
     * @return {Boolean}      是否擁有cookie
     */
    hasItem: function (sKey) {
        if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
        return (new RegExp('(?:^|;\\s*)' + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=')).test(document.cookie);
    },
    /**
     * 獲取全部cookie名稱
     * @return {Array} 名稱集合
     */
    keys: function () {
        var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, '').split(/\s*(?:\=[^;]*)?;\s*/);
        for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
        return aKeys;
    }
};

其餘的都好理解，須要注意的是，刪除cookie是設置cookie過期便可，並不是咱們慣性的刪除操做。而後設置cookie的名稱和值的時候注意使用encodeURIComponent方法轉換一下。

使用不一樣的參數測試接口結果以下：

//document.cookie = "key1=value1"
CookieOper.setItem('key1', 'value1');

//document.cookie = "key1=value1; key2=value2"
//一分鐘到期
CookieOper.setItem('key2', 'value2', 60);

//document.cookie = "key1=value1; key2=value2"
//沒法經過 document.cookie 獲取到不一樣路徑下的cookie信息，
//可是能夠獲取到當前路徑下子目錄的信息
CookieOper.setItem('key3', 'value3', null, '/dir/');
//刪除失敗
CookieOper.removeItem('key3', '/dir/');

//document.cookie = "key1=value1; key2=value2"
//當前域中的cookie不會變化
//這裏文檔的訪問地址爲：lp:8020
CookieOper.setItem('key4', 'value4', null, null, '11.lp');

//document.cookie = "key1=value1; key2=value2"
//因爲當前地址並無使用https，因此cookie設置沒法生效。
CookieOper.setItem('key4', 'value4', null, null, null, true);