超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

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

2018-4-16    seo達人

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

1、cookie的作用：

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


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

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


3、cookie的分類：

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

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


4、簡單的使用cookie的代碼

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

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

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

[javascript] view plain copy
  1. // key : cookie 名  
  2. // value : cookie 值  
  3. // options : 可選配置參數(shù)  
  4. //      options = {  
  5. //          expires : 7|new Date(), // 失效時間  
  6. //          path : "/", // 路徑  
  7. //          domain : "", // 域名  
  8. //          secure : true // 安全連接  
  9. //      }  
  10. function cookie(key, value, options) {  
  11.     /* read 讀取 */  
  12.     // 如果沒有傳遞 value ，則表示根據(jù) key 讀取 cookie 值  
  13.     if (typeof value === "undefined") { // 讀取  
  14.         // 獲取當(dāng)前域下所有的 cookie，保存到 cookies 數(shù)組中  
  15.         var cookies = document.cookie.split("; ");  
  16.         // 遍歷 cookies 數(shù)組中的每個元素  
  17.         for (var i = 0, len = cookies.length; i < len; i++) {  
  18.             // cookies[i] : 當(dāng)前遍歷到的元素，代表的是 "key=value" 意思的字符串，  
  19.             // 將字符串以 = 號分割返回的數(shù)組中第一個元素表示 key，  
  20.             // 第二個元素表示 value  
  21.             var cookie = cookies[i].split("=");  
  22.             // 判斷是否是要查找的 key，對查找的 key 、value 都要做解碼操作  
  23.             if (decodeURIComponent(cookie[0]) === key) {  
  24.                 return decodeURIComponent(cookie[1]);  
  25.             }  
  26.         }  
  27.         // 沒有查找到指定的 key 對應(yīng)的 value 值，則返回 null  
  28.         return null;  
  29.     }  
  30.   
  31.     /* 存入 設(shè)置 */  
  32.     // 設(shè)置 options 默認(rèn)為空對象  
  33.     options = options || {};  
  34.     // key = value，對象 key，value 編碼  
  35.     var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);  
  36.     // 失效時間  
  37.     if ((typeof options.expires) !== "undefined") { // 有配置失效時間  
  38.         if (typeof options.expires === "number") { // 失效時間為數(shù)字  
  39.             var days = options.expires,   
  40.                 t = options.expires = new Date();  
  41.             t.setDate(t.getDate() + days);  
  42.         }   
  43.         cookie += ";expires=" + options.expires.toUTCString();  
  44.     }  
  45.     // 路徑  
  46.     if (typeof options.path !== "undefined")  
  47.         cookie += ";path=" + options.path;  
  48.     // 域名  
  49.     if (typeof options.domain !== "undefined")  
  50.         cookie += ";domain=" + options.domain;  
  51.     // 安全連接  
  52.     if (options.secure)  
  53.         cookie += ";secure";  
  54.   
  55.     // 保存  
  56.     document.cookie = cookie;  
  57. }  
  58.   
  59. // 從所有的 cookie 中刪除指定的 cookie  
  60. function removeCookie(key, options) {  
  61.     options = options || {};  
  62.     options.expires = -1; // 將失效時間設(shè)置為 1 天前  
  63.     cookie(key, "", options);  
  64. }  

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

[javascript] view plain copy
  1. // 找到所有的 “添加到購物車” 超級鏈接  
  2.             var links = $("a", $("#tab"));  
  3.             // 循環(huán)，為每個 “添加到購物車” 的超級鏈接添加點擊事件  
  4.             for (var i = 0, len = links.length; i < len; i++) {  
  5.                 links[i].onclick = function(){  
  6.                     // 獲取當(dāng)前超級鏈接所在行的所有單元格  
  7.                     var _cells = this.parentNode.parentNode.cells;  
  8.                     // 獲取到即將添加到購物車中的商品信息  
  9.                     var _id = _cells[0].innerHTML,  
  10.                         _name = _cells[1].innerHTML,  
  11.                         _price = _cells[2].innerHTML;  
  12.                     // 將商品信息包裝到一個對象中  
  13.                     var product = {  
  14.                         id : _id,  
  15.                         name : _name,  
  16.                         price : _price,  
  17.                         amount : 1  
  18.                     };  
  19.   
  20.                     /* 將當(dāng)前選購的商品對象保存到 cookie 中去 */  
  21.                     // 從 cookie 中讀取已有的保存購物車的數(shù)組結(jié)構(gòu)  
  22.                     var _products = cookie("products");  
  23.                     if (_products === null) // cookie 中不存在 products 名的 cookie  
  24.                         _products = [];  
  25.                     else // 存在，則解析 cookie 讀取到的字符串為 數(shù)組 結(jié)構(gòu)  
  26.                         _products = JSON.parse(_products);  
  27.   
  28.                     // 將當(dāng)前選購的商品追加到數(shù)組中保存  
  29.                     _products.push(product);  
  30.                     // 繼續(xù)將 _products 數(shù)組內(nèi)容存回 cookie  
  31.                     cookie("products", JSON.stringify(_products), {expires:7});  
  32.                 }  
  33.             }  
html代碼，css代碼大家可以自己寫

[javascript] view plain copy
  1. <table id="tab">  
  2.         <tr>  
  3.             <td>序號</td>  
  4.             <td>名稱</td>  
  5.             <td>價格</td>  
  6.             <td>操作</td>  
  7.         </tr>  
  8.         <tr>  
  9.             <td>1</td>  
  10.             <td>空調(diào)</td>  
  11.             <td>3999</td>  
  12.             <td><a href="javascript:void(0);">添加到購物車</a></td>  
  13.         </tr>  
  14.         <tr>  
  15.             <td>2</td>  
  16.             <td>風(fēng)扇</td>  
  17.             <td>288</td>  
  18.             <td><a href="javascript:void(0);">添加到購物車</a></td>  
  19.         </tr>  
  20.     </table>  
  21.     <a href="cart_購物車.html" target="_blank">查看購物車</a>  

購物車還原商品信息：

[javascript] view plain copy
  1. // 從 cookie 中讀取購物車已有的商品信息  
  2.             var _products = cookie("products");  
  3.             // 判斷購物車是否有商品  
  4.             if (_products === null || (_products = JSON.parse(_products)).length === 0)  
  5.                 return;  
  6.   
  7.             // 如果有商品，則顯示到頁面中  
  8.             $(".result")[0].innerHTML = "";  
  9.             for (var i = 0, len = _products.length; i < len; i++) {  
  10.                 // 當(dāng)前遍歷到的商品對象  
  11.                 var prod = _products[i];  
  12.                 // 克隆 .row 的節(jié)點  
  13.                 var _row = $(".row")[0].cloneNode(true);  
  14.                 // 將當(dāng)前商品對象的信息替換節(jié)點中對應(yīng)的部分，用class名獲取到的節(jié)點返回類型是一個數(shù)組所以要在后面加上[0]  
  15.                 $(".index", _row)[0].innerHTML = prod.id; // 編號  
  16.                 $(".name", _row)[0].innerHTML = prod.name; // 名稱  
  17.                 $(".price", _row)[0].innerHTML = prod.price; // 價格  
  18.                 $(".amount", _row)[0].innerHTML = prod.amount; // 數(shù)量  
  19.                 $(".oper", _row)[0].innerHTML = "<a href='javascript:void(0);'>刪除</a>"  
  20.   
  21.                 // 將克隆的節(jié)點副本追加到 .result 的 div 中  
  22.                 $(".result")[0].appendChild(_row);  
  23.             };  
  24.   
  25.             // 為每個 “刪除” 的超級鏈接綁定點擊事件  
  26.             var links = $("a", $("#container"));  
  27.             for (var i = 0, len = links.length; i < len; i++) {  
  28.                 // links[i].index = i; // 為當(dāng)前遍歷到的超級鏈接附加數(shù)據(jù)  
  29.                 links[i].product = _products[i]; //   
  30.                 links[i].onclick = function(){  
  31.                     // alert("你點擊的是第" + (this.index + 1) + "個連接");  
  32.                     var index = inArray(this.product, _products);  
  33.                       
  34.                     if (index !== -1) {  
  35.                         _products.splice(index, 1);  
  36.                     }  
  37.                     // 更新 cookie  
  38.                     cookie("products", JSON.stringify(_products), {expires:7});  
  39.   
  40.                     // 找出頁面中待刪除的行  
  41.                     var _row = this.parentNode.parentNode;  
  42.                     _row.parentNode.removeChild(_row);  
  43.                 };  
  44.             }  
這里的$(' ')函數(shù)是自己封裝的函數(shù)，用于獲取到DOM節(jié)點，可以看下我關(guān)于getElementsByClassName的兼容那篇文章。

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

分享本文至：

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.miumiuwan.com

存檔