關于Cookie的原理、作用，區別以及使用 - 設計每日一貼---北京蘭亭妙微/UI設計公司

<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

關于Cookie的原理、作用，區別以及使用

2018-4-16 seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

1、cookie的作用：

我們在瀏覽器中，經常涉及到數據的交換，比如你登錄郵箱，登錄一個頁面。我們經常會在此時設置30天內記住我，或者自動登錄選項。那么它們是怎么記錄信息的呢，答案就是今天的主角cookie了，Cookie是由HTTP服務器設置的，保存在瀏覽器中，但HTTP協議是一種無狀態協議，在數據交換完畢后，服務器端和客戶端的鏈接就會關閉，每次交換數據都需要建立新的鏈接。就像我們去超市買東西，沒有積分卡的情況下，我們買完東西之后，超市沒有我們的任何消費信息，但我們辦了積分卡之后，超市就有了我們的消費信息。cookie就像是積分卡，可以保存積分，商品就是我們的信息，超市的系統就像服務器后臺，http協議就是交易的過程。

2、機制的區別：

session機制采用的是在服務器端保持狀態的方案，而cookie機制則是在客戶端保持狀態的方案，cookie又叫會話跟蹤機制。打開一次瀏覽器到關閉瀏覽器算是一次會話。說到這里，講下HTTP協議，前面提到，HTTP協議是一種無狀態協議，在數據交換完畢后，服務器端和客戶端的鏈接就會關閉，每次交換數據都需要建立新的鏈接。此時，服務器無法從鏈接上跟蹤會話。cookie可以跟蹤會話，彌補HTTP無狀態協議的不足。

3、cookie的分類：

cookie分為會話cookie和持久cookie，會話cookie是指在不設定它的生命周期expires時的狀態，前面說了，瀏覽器的開啟到關閉就是一次會話，當關閉瀏覽器時，會話cookie就會跟隨瀏覽器而銷毀。當關閉一個頁面時，不影響會話cookie的銷毀。會話cookie就像我們沒有辦理積分卡時，單一的買賣過程，離開之后，信息則銷毀。

持久cookie則是設定了它的生命周期expires，此時，cookie像商品一樣，有個保質期，關閉瀏覽器之后，它不會銷毀，直到設定的過期時間。對于持久cookie，可以在同一個瀏覽器中傳遞數據，比如，你在打開一個淘寶頁面登陸后，你在點開一個商品頁面，依然是登錄狀態，即便你關閉了瀏覽器，再次開啟瀏覽器，依然會是登錄狀態。這就是因為cookie自動將數據傳送到服務器端，在反饋回來的結果。持久cookie就像是我們辦理了一張積分卡，即便離開，信息一直保留，直到時間到期，信息銷毀。

4、簡單的使用cookie的代碼

cookie的幾種常見屬性：document.cookie="key=value;expires=失效時間;path=路徑;domain=域名;secure;(secure表安全級別）,

cookie以字符串的形式保存在瀏覽器中。下面貼段代碼出來，是一個類似購物網站的將商品添加到購物車，再從購物車還原商品信息的過程，是自己用原生JS封裝的函數。

封裝的cookie的存入，讀取以及刪除的函數：（這里是將信息以對象的形式存放到cookie中的，會用到JSON的知識)

[javascript] view plain copy

// key : cookie 名

// value : cookie 值

// options : 可選配置參數

//      options = {

//          expires : 7|new Date(), // 失效時間

//          path : "/", // 路徑

//          domain : "", // 域名

//          secure : true // 安全連接

//      }

function cookie(key, value, options) {

    /* read 讀取 */

    // 如果沒有傳遞 value ，則表示根據 key 讀取 cookie 值

    if (typeof value === "undefined") { // 讀取

        // 獲取當前域下所有的 cookie，保存到 cookies 數組中

        var cookies = document.cookie.split("; ");

        // 遍歷 cookies 數組中的每個元素

        for (var i = 0, len = cookies.length; i < len; i++) {

            // cookies[i] : 當前遍歷到的元素，代表的是 "key=value" 意思的字符串，

            // 將字符串以 = 號分割返回的數組中第一個元素表示 key，

            // 第二個元素表示 value

            var cookie = cookies[i].split("=");

            // 判斷是否是要查找的 key，對查找的 key 、value 都要做解碼操作

            if (decodeURIComponent(cookie[0]) === key) {

                return decodeURIComponent(cookie[1]);

            }

        }

        // 沒有查找到指定的 key 對應的 value 值，則返回 null

        return null;

    }



    /* 存入設置 */

    // 設置 options 默認為空對象

    options = options || {};

    // key = value，對象 key，value 編碼

    var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);

    // 失效時間

    if ((typeof options.expires) !== "undefined") { // 有配置失效時間

        if (typeof options.expires === "number") { // 失效時間為數字

            var days = options.expires,

                t = options.expires = new Date();

            t.setDate(t.getDate() + days);

        }

        cookie += ";expires=" + options.expires.toUTCString();

    }

    // 路徑

    if (typeof options.path !== "undefined")

        cookie += ";path=" + options.path;

    // 域名

    if (typeof options.domain !== "undefined")

        cookie += ";domain=" + options.domain;

    // 安全連接

    if (options.secure)

        cookie += ";secure";



    // 保存

    document.cookie = cookie;

}



// 從所有的 cookie 中刪除指定的 cookie

function removeCookie(key, options) {

    options = options || {};

    options.expires = -1; // 將失效時間設置為 1 天前

    cookie(key, "", options);

}

下面是商品詳情頁的JS代碼

[javascript] view plain copy

// 找到所有的 “添加到購物車” 超級鏈接

            var links = $("a", $("#tab"));

            // 循環，為每個 “添加到購物車” 的超級鏈接添加點擊事件

            for (var i = 0, len = links.length; i < len; i++) {

                links[i].onclick = function(){

                    // 獲取當前超級鏈接所在行的所有單元格

                    var _cells = this.parentNode.parentNode.cells;

                    // 獲取到即將添加到購物車中的商品信息

                    var _id = _cells[0].innerHTML,

                        _name = _cells[1].innerHTML,

                        _price = _cells[2].innerHTML;

                    // 將商品信息包裝到一個對象中

                    var product = {

                        id : _id,

                        name : _name,

                        price : _price,

                        amount : 1

                    };



                    /* 將當前選購的商品對象保存到 cookie 中去 */

                    // 從 cookie 中讀取已有的保存購物車的數組結構

                    var _products = cookie("products");

                    if (_products === null) // cookie 中不存在 products 名的 cookie

                        _products = [];

                    else // 存在，則解析 cookie 讀取到的字符串為數組結構

                        _products = JSON.parse(_products);



                    // 將當前選購的商品追加到數組中保存

                    _products.push(product);

                    // 繼續將 _products 數組內容存回 cookie

                    cookie("products", JSON.stringify(_products), {expires:7});

                }

            }

html代碼，css代碼大家可以自己寫

[javascript] view plain copy

<table id="tab">

        <tr>

            <td>序號</td>

            <td>名稱</td>

            <td>價格</td>

            <td>操作</td>

        </tr>

        <tr>

            <td>1</td>

            <td>空調</td>

            <td>3999</td>

            <td><a href="javascript:void(0);">添加到購物車</a></td>

        </tr>

        <tr>

            <td>2</td>

            <td>風扇</td>

            <td>288</td>

            <td><a href="javascript:void(0);">添加到購物車</a></td>

        </tr>

    </table>

    <a href="cart_購物車.html" target="_blank">查看購物車</a>

購物車還原商品信息：

[javascript] view plain copy

// 從 cookie 中讀取購物車已有的商品信息

            var _products = cookie("products");

            // 判斷購物車是否有商品

            if (_products === null || (_products = JSON.parse(_products)).length === 0)

                return;



            // 如果有商品，則顯示到頁面中

            $(".result")[0].innerHTML = "";

            for (var i = 0, len = _products.length; i < len; i++) {

                // 當前遍歷到的商品對象

                var prod = _products[i];

                // 克隆 .row 的節點

                var _row = $(".row")[0].cloneNode(true);

                // 將當前商品對象的信息替換節點中對應的部分，用class名獲取到的節點返回類型是一個數組所以要在后面加上[0]

                $(".index", _row)[0].innerHTML = prod.id; // 編號

                $(".name", _row)[0].innerHTML = prod.name; // 名稱

                $(".price", _row)[0].innerHTML = prod.price; // 價格

                $(".amount", _row)[0].innerHTML = prod.amount; // 數量

                $(".oper", _row)[0].innerHTML = "<a href='javascript:void(0);'>刪除</a>"



                // 將克隆的節點副本追加到 .result 的 div 中

                $(".result")[0].appendChild(_row);

            };



            // 為每個 “刪除” 的超級鏈接綁定點擊事件

            var links = $("a", $("#container"));

            for (var i = 0, len = links.length; i < len; i++) {

                // links[i].index = i; // 為當前遍歷到的超級鏈接附加數據

                links[i].product = _products[i]; //

                links[i].onclick = function(){

                    // alert("你點擊的是第" + (this.index + 1) + "個連接");

                    var index = inArray(this.product, _products);



                    if (index !== -1) {

                        _products.splice(index, 1);

                    }

                    // 更新 cookie

                    cookie("products", JSON.stringify(_products), {expires:7});



                    // 找出頁面中待刪除的行

                    var _row = this.parentNode.parentNode;

                    _row.parentNode.removeChild(_row);

                };

            }

這里的$(' ')函數是自己封裝的函數，用于獲取到DOM節點，可以看下我關于getElementsByClassName的兼容那篇文章。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

« 移動端優化如何做好你真的了解盒模型么 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合