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

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
returnnull;
}
/* 存入設定 */
// 設定 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>
相關推薦

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

1、cookie的作用：我們在瀏覽器中，經常涉及到資料的交換，比如你登入郵箱，登入一個頁面。我們經常會在此時設定30天內記住我，或者自動登入選項。那麼它們是怎麼記錄資訊的呢，答案就是今天的主角cookie了，Cookie是由HTTP伺服器設定的，儲存在瀏覽器中，但HTTP協議是一種無狀態協議，

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

1、cookie的作用：我們在瀏覽器中，經常涉及到資料的交換，比如你登入郵箱，登入一個頁面。我們經常會在此時設定30天內記住我，或者自動登入選項。那麼它們是怎麼記錄資訊的呢，答案就是今天的主角cookie了，Cookie是由HTTP伺服器設定的，儲存在瀏覽器中，但HTTP協議是一種無狀態協議，

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

1、cookie的作用：我們在瀏覽器中，經常涉及到資料的交換，比如你登入郵箱，登入一個頁面。我們經常會在此時設定30天內記住我，或者自動登入選項。那麼它們是怎麼記錄資訊的呢，答案就是今天的主角cookie了，Cookie是由HTTP伺服器設定的，儲存在瀏覽器中，但HTTP協議

Java中的集合詳解，結合 ArrayList、HashSet 的區別以及HashCode的作用。

Java中的集合： (1）Collection List(有序,可重複) ArrayList

描述Cookie和Session的作用，區別和各自的應用範圍，Session工作原理

Session用於儲存每個使用者的專用資訊. 每個客戶端使用者訪問時，伺服器都為每個使用者分配一個唯一的會話ID（Session ID) . 她的生存期是使用者持續請求時間再加上一段時間(一般是20分鐘左右).Session中的資訊儲存在Web伺服器內容中,儲存

php的執行原理、cgi對比fastcgi以及php-cgi和php-fpm之間的聯絡區別

最近專案中本地測試環境遇到了windows環境下的nginx使用file_get_contents/curl訪問php檔案導致的阻塞問題，一直在找解決的方案，這個問題研究了三天終於找到了解決方案，特別因為這個我也對php的執行原理產生了興趣，所以這裡對此進行一定程度的記錄，可

jquery 對象的 height、innerHeight、outerHeight 的區別以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

有關 del core body pla port log path jstl 前言：jquery 對象的 height、innerHeight、outerHeight，還有 DOM 元素的 clientHeight、offsetHeight、scrollHeight、o

FFE均衡技術的原理、作用及特點

分享圖片基本我認采集我們 feed 發送信號因子不用說完CTLE之後，大家不用猜都知道會講FFE。的確，FFE（Feed Forward Equalization前向反饋均衡）和前面CTLE有一些相似之處，它們都是模擬的均衡器，同時也是線性的。當然說模擬，線性

世界座標、相機座標、影象座標、畫素座標的原理、關係，並用matlab模擬

世界座標、相機座標、影象座標、畫素座標的原理、關係，並用matlab模擬照相機是日常生活中最常見的。它能把三維的空間圖片等比例縮小投影在照片上，稱為一個二維影象。以下我們就講一講原理，並相應的進行matlab模擬。在學之前，先要了解幾個概念：什麼是世界座標？

介面與抽象類，區別以及使用場景

順便做個記錄介面和抽象類應該是Java語法中最常見的兩個概念關於兩者，網上也是一搜一噸的對比，總體如下： 1，抽象類的成員可以具有訪問級別介面的成員全部public級別 2，抽象類可以包含欄位介面不可以 3，抽象類可以繼承介面介面不能繼承抽象類

IIC詳解，包括原理、過程，最後一步步教你實現IIC

IIC詳解 1、I2C匯流排具有兩根雙向訊號線，一根是資料線SDA，另一根是時鐘線SCL 2、IIC總線上可以掛很多裝置：多個主裝置，多個從裝置（外圍裝置）。上圖中主裝置是兩個微控制器，剩下的都是從裝置。 3、多主機會產生匯流排裁決問題。當多個主機同時想佔用匯

簡述TCP、UDP，區別及各自優缺點

1、UDP UDP是面向無連線的通訊協議，UDP資料包括目的埠號和源埠號資訊優點： UDP速度快，操作簡單，要求系統資源較少，由於通訊不需要連線可實現廣播發送缺點： UDP傳送資料前並不與對方簡歷連線，對接收到的資料也不傳送確認訊號，傳送端不知道資料是否會正確接收，也不重複傳送，不

ftrace、kpatch、systemtap的基本原理、聯絡和區別

1、ftrace Linux當前版本中，功能最強大的除錯、跟蹤手段。其最基本的功能是提供了動態和靜態探測點，用於探測核心中指定位置上的相關資訊。靜態探測點，是在核心程式碼中呼叫ftrace提供的相應介面實現，稱之為靜態是因為，是在核心程式碼中寫死的，靜態編譯到核心程式碼中

C++中重定義、重寫、過載的區別以及隱藏與覆蓋的訪問

http://blog.csdn.net/yuzhiyuxia/article/details/17392271 在C++中，有以下幾個概念：重定義（redefine）：派生類對基類的成員函式重新定義（即派生類定義了某個函式）該函式的名字與基類中的函式名字一樣。過載

string、Ctring、Wstring的區別以及寬位元組與多位元組的運用

<span style="font-size:18px;"><span class="lnum" style="color:#606060;LINE-HEIGHT: 1.5"> 1: </span><span class="kwrd" style="color

淺談es的原理、機制，IK分詞原理

1、分散式的架構es都有哪些機制？ 1、主備 primary shard 的副本 replica shard primary shard不能和自己的replica shard放在同一個節點上、 2、容錯使用選舉機制 master node宕機，選舉mast

驗證碼的原理、作用及實現

驗證碼原理分析及實現一、前言最近學習實現了驗證碼，首先附圖效果如下：( 簡單說明：分別提交正確、錯誤的驗證碼及對應效果本文是圖文結合說明)

關於javaScript變數、作用域鏈以及this指標的詳解

1)引子 undefined 先上程式碼： var a = 1; function hehe() { window.alert(a); var a = 2; window.alert(a); } heh

列表、字典、元組、集合的區別以及各自的使用方法

區別： 1. 列表列表、元組、字典、集合的區別是python面試中最常見的一個問題。這個問題雖然很基礎，但確實能反映出面試者的基礎水平。 list是處理一組有序專案的資料結構，即你可以在一個列表中儲存一個序列的專案。列表中的專案。列表中的專案應該包

python引數的作用和區別以及使用方法

python中引數的型別有位置引數、預設引數、可變引數、關鍵字引數、命名關鍵字引數和一些引數的組合.位置引數： def power(x): return x*x 其中x就是位置引數。預設引數：能簡化函式的呼叫，但需要注意幾點： 1、必選引數在前，預設引數在後，否

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

相關推薦