最新、最快、最全的久久,久久精品人人爽人人爽快

關(guān)于Cookie的原理、作用，區(qū)別以及使用

2018-4-16 seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

1、cookie的作用：

我們?cè)跒g覽器中，經(jīng)常涉及到數(shù)據(jù)的交換，比如你登錄郵箱，登錄一個(gè)頁面。我們經(jīng)常會(huì)在此時(shí)設(shè)置30天內(nèi)記住我，或者自動(dòng)登錄選項(xiàng)。那么它們是怎么記錄信息的呢，答案就是今天的主角cookie了，Cookie是由HTTP服務(wù)器設(shè)置的，保存在瀏覽器中，但HTTP協(xié)議是一種無狀態(tài)協(xié)議，在數(shù)據(jù)交換完畢后，服務(wù)器端和客戶端的鏈接就會(huì)關(guān)閉，每次交換數(shù)據(jù)都需要建立新的鏈接。就像我們?nèi)コ匈I東西，沒有積分卡的情況下，我們買完東西之后，超市沒有我們的任何消費(fèi)信息，但我們辦了積分卡之后，超市就有了我們的消費(fèi)信息。cookie就像是積分卡，可以保存積分，商品就是我們的信息，超市的系統(tǒng)就像服務(wù)器后臺(tái)，http協(xié)議就是交易的過程。

2、機(jī)制的區(qū)別：

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

3、cookie的分類：

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

持久cookie則是設(shè)定了它的生命周期expires，此時(shí)，cookie像商品一樣，有個(gè)保質(zhì)期，關(guān)閉瀏覽器之后，它不會(huì)銷毀，直到設(shè)定的過期時(shí)間。對(duì)于持久cookie，可以在同一個(gè)瀏覽器中傳遞數(shù)據(jù)，比如，你在打開一個(gè)淘寶頁面登陸后，你在點(diǎn)開一個(gè)商品頁面，依然是登錄狀態(tài)，即便你關(guān)閉了瀏覽器，再次開啟瀏覽器，依然會(huì)是登錄狀態(tài)。這就是因?yàn)閏ookie自動(dòng)將數(shù)據(jù)傳送到服務(wù)器端，在反饋回來的結(jié)果。持久cookie就像是我們辦理了一張積分卡，即便離開，信息一直保留，直到時(shí)間到期，信息銷毀。

4、簡單的使用cookie的代碼

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

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

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

[javascript] view plain copy

// key : cookie 名

// value : cookie 值

// options : 可選配置參數(shù)

//      options = {

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

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

//          domain : "", // 域名

//          secure : true // 安全連接

//      }

function cookie(key, value, options) {

    /* read 讀取 */

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

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

        // 獲取當(dāng)前域下所有的 cookie，保存到 cookies 數(shù)組中

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

        // 遍歷 cookies 數(shù)組中的每個(gè)元素

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

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

            // 將字符串以 = 號(hào)分割返回的數(shù)組中第一個(gè)元素表示 key，

            // 第二個(gè)元素表示 value

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

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

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

                return decodeURIComponent(cookie[1]);

            }

        }

        // 沒有查找到指定的 key 對(duì)應(yīng)的 value 值，則返回 null

        return null;

    }



    /* 存入設(shè)置 */

    // 設(shè)置 options 默認(rèn)為空對(duì)象

    options = options || {};

    // key = value，對(duì)象 key，value 編碼

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

    // 失效時(shí)間

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

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

            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; // 將失效時(shí)間設(shè)置為 1 天前

    cookie(key, "", options);

}

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

[javascript] view plain copy

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

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

            // 循環(huán)，為每個(gè) “添加到購物車” 的超級(jí)鏈接添加點(diǎn)擊事件

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

                links[i].onclick = function(){

                    // 獲取當(dāng)前超級(jí)鏈接所在行的所有單元格

                    var _cells = this.parentNode.parentNode.cells;

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

                    var _id = _cells[0].innerHTML,

                        _name = _cells[1].innerHTML,

                        _price = _cells[2].innerHTML;

                    // 將商品信息包裝到一個(gè)對(duì)象中

                    var product = {

                        id : _id,

                        name : _name,

                        price : _price,

                        amount : 1

                    };



                    /* 將當(dāng)前選購的商品對(duì)象保存到 cookie 中去 */

                    // 從 cookie 中讀取已有的保存購物車的數(shù)組結(jié)構(gòu)

                    var _products = cookie("products");

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

                        _products = [];

                    else // 存在，則解析 cookie 讀取到的字符串為數(shù)組結(jié)構(gòu)

                        _products = JSON.parse(_products);



                    // 將當(dāng)前選購的商品追加到數(shù)組中保存

                    _products.push(product);

                    // 繼續(xù)將 _products 數(shù)組內(nèi)容存回 cookie

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

                }

            }

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

[javascript] view plain copy

<table id="tab">

        <tr>

            <td>序號(hào)</td>

            <td>名稱</td>

            <td>價(jià)格</td>

            <td>操作</td>

        </tr>

        <tr>

            <td>1</td>

            <td>空調(diào)</td>

            <td>3999</td>

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

        </tr>

        <tr>

            <td>2</td>

            <td>風(fēng)扇</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++) {

                // 當(dāng)前遍歷到的商品對(duì)象

                var prod = _products[i];

                // 克隆 .row 的節(jié)點(diǎn)

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

                // 將當(dāng)前商品對(duì)象的信息替換節(jié)點(diǎn)中對(duì)應(yīng)的部分，用class名獲取到的節(jié)點(diǎn)返回類型是一個(gè)數(shù)組所以要在后面加上[0]

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

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

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

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

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



                // 將克隆的節(jié)點(diǎn)副本追加到 .result 的 div 中

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

            };



            // 為每個(gè) “刪除” 的超級(jí)鏈接綁定點(diǎn)擊事件

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

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

                // links[i].index = i; // 為當(dāng)前遍歷到的超級(jí)鏈接附加數(shù)據(jù)

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

                links[i].onclick = function(){

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

                    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);

                };

            }

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

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

« 移動(dòng)端優(yōu)化如何做好你真的了解盒模型么 »

日歷

鏈接

個(gè)人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com

關(guān)于Cookie的原理、作用，區(qū)別以及使用

分類

日歷

鏈接

個(gè)人資料

存檔

關(guān)于Cookie的原理、作用，區(qū)別以及使用