?　　　　1.什么是cookie？

　　　　　　　在討論cookie之前，需要知道“會話跟蹤”這個概念。

　　　　　　　　1. 什么是會話?
　　　　　　　　客戶端打開與服務器的連接發出請求到服務器響應客戶端請求的全過程稱之為會話?


　　　　　　　　2. 什么是會話跟蹤?
　　　　　　　　對同一個用戶對服務器的連續的請求和接受響應的監視?


　　　　　　　　3. 為什么需要會話跟蹤?
　　　　　　　　瀏覽器與服務器之間的通信是通過HTTP協議進行通信的，而HTTP協議是”無狀態”的協議，它不能保存客戶的信息，

　　　　　　　　即一次響應完成之后連接就斷開了，下一次的請求需要重新連接，這樣就需要判斷是否是同一個用戶，所以才應用會話跟蹤技術來實現這種要求

　　　　　　　　　　

　　　　在程序中，“會話跟蹤”是很重要的事情。由于http是無狀態的協議（對于事物處理沒有記憶能力，缺少狀態意味著如果后續處理需要前面的信息，則它必須重傳），一旦數據交換完畢，客戶端和服務器端的連接就會關閉，再次交換數據需要建立新的連接，用戶訪問同一個站點就會重新加載所有數據，這樣不利于交互（比如：用戶A購買了一件商品放入購物車內，再次打開該網站購買商品時，服務器就無法判斷用戶A曾經是否已經將商品加入購物車。） 。所以，“會話跟蹤”就是在這種情況下，應運而生。為了支持客戶端與服務器之間的交互，我們就需要通過不同的技術為交互存儲狀態，而這些不同的技術就是Cookie和Session了。Cookie通過在客戶端（通常是瀏覽器）記錄信息確定用戶身份，而Session通過在服務器端記錄信息確定用戶身份。回到我們的問題上：什么是Cookie？

　　　　Cookie譯為“餅干”，是由W3C組織提出的，最早是由Netscape社區發展的一種機制，目前，所有主流瀏覽器都支持Cookie 。前面提到，http是無狀態協議，服務器單從網絡連接上是無法知道客戶身份的。怎么辦呢？就給客戶端們頒發一個通行證吧。每人一個，無論誰訪問都必須攜帶自己的通行證。這樣服務器就可以從通行證上確認客戶身份了。這就是Cookie的工作原理。

　　　　Cookie實際上是一小段的文本信息，客戶端請求服務器，服務器就會使用response（？）向客戶端瀏覽器頒發一個Cookie。瀏覽器就會把Cookie保存到文件里（不是緩存！不是緩存！清除瀏覽器緩存是無法清除掉cookie的）。當瀏覽器再次訪問該網站時，瀏覽器就會把請求的網址連同該Cookie（注意：不是所有的Cookie，下面會說到）一同提交給服務器。服務器檢查該Cookie，以此來辨認用戶狀態與權限（注意：服務器是可以更改Cookie里的內容的）

　　　　查看某個網站頒發的Cookie很簡單。在瀏覽器地址欄輸入javascript：alert（document.cookie）【需要聯網才能查看】。另：Cookie功能需要瀏覽器支持。

?

　　　　2.Cookie的特性

　　　　　　　很多網站都會使用Cookie來鑒別用戶。如Google會向客戶端頒發Cookie，百度也會向客戶端頒發Cookie。那瀏覽器訪問Google會不會攜帶上百度頒發的Cookie呢？或者Google能不能修改百度頒發的Cookie呢？ ? ?答案是否定的。Cookie的一個重要特性就是---不可跨域 （什么是跨域？） 不同域名之間是無法使用同一Cookie的。

?

　　　　3.Cookie的屬性

　　　　　　　　

?

　　　　

　　　　　　在chrome控制臺中的resources選項卡中可以看到cookie的信息。

　　　　　　　　　　　　一個域名下面可能存在著很多個cookie對象。

　　　　　　　　　　　　name字段為一個cookie的名稱。

?

　　　　　　　　　　　　value字段為一個cookie的值。

?

　　　　　　　　　　　　domain字段為可以訪問此cookie的域名。

　　　　　　　　　　　　　　非頂級域名，如二級域名或者三級域名，設置的cookie的domain只能為頂級域名或者二級域名或者三級域名本身，

　　　　　　　　　　　　　　不能設置其他二級域名的cookie，否則cookie無法生成。

　　　　　　　　　　　　　　頂級域名只能設置domain為頂級域名，不能設置為二級域名或者三級域名，否則cookie無法生成。

　　　　　　　　　　　　　　二級域名能讀取設置了domain為頂級域名或者自身的cookie，不能讀取其他二級域名domain的cookie。

　　　　　　　　　　　　　　所以要想cookie在多個二級域名中共享，需要設置domain為頂級域名，這樣就可以在所有二級域名里面或者到這個cookie的值了。
　　　　　　　　　　　　　　頂級域名只能獲取到domain設置為頂級域名的cookie，其他domain設置為二級域名的無法獲取。

?

　　　　　　　　　　　path字段為可以訪問此cookie的頁面路徑。 比如domain是abc.com,path是/test，那么只有/test路徑下的頁面可以讀取此cookie。

?

　　　　　　　　　　　expires/Max-Age?字段為此cookie超時時間。若設置其值為一個時間，那么當到達此時間后，此cookie失效。

　　　　　　　　　　　不設置的話默認值是Session，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標簽頁，而是整個瀏覽器) 后，

　　　　　　　　　　　此cookie失效。

　　　　　　　　　　　Size字段 此cookie大小。

?

　　　　　　　　　　　http字段 ?cookie的httponly屬性。若此屬性為true，則只有在http請求頭中會帶有此cookie的信息，

　　　　　　　　　　　而不能通過document.cookie來訪問此cookie。

?

　　　　　　　　　　　secure?字段 設置是否只能通過https來傳遞此條cookie。

　

?

?

　　　　4.Cookie的操作（在JavaScript下）

　　　　　　　　首先，要明白這一點：cookie是瀏覽器提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。

　　　　　　　　可以由JavaScript對其進行控制，而并不是JavaScript本身的性質。

　　　　　　　　　　假設有這樣一種情況，在某個用例流程中，由A頁面跳至B頁面，若在A頁面中采用JS用變量temp保存了一個值，在B頁面的時候，

　　　　　　　　　　　　同樣需要使用JS來引用temp的變量值，

　　　　　　　　　　　　由于JS中的全局變量或者靜態變量的生命周期是有限的，當發生頁面跳轉或者頁面關閉的時候，這些變量的值會重新載入，

　　　　　　　　　　　　即沒有達到保存的效果。

　　　　　　　　　　　　解決這個問題的最好的方案是采用cookie來保存該變量的值，因為cookie是保存在內存或者用戶文件夾里的，可以看成是全局變量 。

　　　　　　　　　　　　那么如何來設置和讀取cookie呢？

　　　　　　　　　 首先需要稍微了解一下cookie的結構，簡單地說：cookie是以鍵值對的形式保存的，即key=value的格式。各個屬性之間一般是以“;”分隔。

　　　　　　　　　　一個cookie的格式如下：

?

　Cookie名稱（作為Cookie的索引便于以后的各種操作）+“=”+Cookie值+“；expires=+有效期+“；path=”+路徑+“；domain=”+域+“；secure=”+安全級別

?

　　　　　　　　　每個Cookie實際上是有多個屬性組成的，所以設置Cookie時理所當然地應該設置多個屬性值，雖然不是每一個屬性都必須填寫，

　　　　　　　　　但大家至少應該把Cookie名稱和Cookie值填上，否則這個Cookie就沒有任何意義了。

　　　　　　　在JavaScript下 設置cookie（在服務器環境下才能設置）：

<script> 　　//設置cookie　　　 　　document.cookie="name=jjk;value=man;"

//獲取cookie console.log(document.cookie); </script>

?

　　　　　　　　　　　　設置cookie的有效時間：

<script>
　　//獲取時間對象var date = newDate();
　　//獲取當前日期并加上7天date.setDate(date.getDate() +7);
　　//重新設置該cookiedocument.cookie = “user=張三;expires=” + date; </script>

?

　　　　　　　　　刪除cookie：　

<script>//失效時間設置在現在時間或現在之前的時間即可刪除指定cookie//name值為指定要刪除的那個cookievar date = new Date();
　　//當前時間刪除cookiedocument.cookie = “user=張三;expires=” + date; </script>

?

　　cookie的封裝-----1.設置cookie：

　　　　　　該函數接收4個參數，分別是：name value ?有效期 ?路徑。 特別地，需要對name和value編碼。因為name和value有中文的話，會出現亂碼。

<script>function setCookie(name,value,expires,path){var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);if(expires instanceof Date){cookieText+=";expries="+expries; }if(path){cookieText+=";path="+path;}document.cookie=cookieText;return decodeURIComponent(document.cookie);}</script>

?

?

　　　cookie的封裝-----2.獲取特定的cookie

　　　　該函數接收一個參數 temp 為你想要獲取的特定的cookie值

<script>function getCookie(temp) {
　　　　//獲取到cookie 假如 cookie="name=jjk;value=19;age=18"var cookie = decodeURIComponent(document.cookie);
　　　　//用split()把cookie切割成數組 [name=jjk,value=19,age=18] var arr = cookie.split(“; ”);
　　　　//循環數組 for (var i=0; i<arr.length; i++) {
　　　　　　　//獲取數組的第i個元素并切割為數組 例如：i=0:arr2=[name,jjk] i=1:arr2=[value,19] i=2:[age,18] var arr2 = arr[i].split(“=”);
　　　　　　　　//判斷arr2的元素個數是否為2 if (arr2.length = 2) {
　　　　　　　　　//判斷arr2的第一個元素是否跟參數一致，如果是，返回arr2[1] if (arr2[0] == temp) { return arr2[1]; } } } return “”; }</script>

?

　　　　cookie的封裝------3.刪除cookie　

　　　　該函數接受一個參數 為該cookie的name值

<script>function removeCookie(name) {document.cookie=encodeURIComponent(name)+“=; expires=” + new Date(); }</script>

?

　

　　6.cookie的用處

　　　　我們只知道cookie可以保存用戶數據，但他的具體用法有什么呢？或者說cookie通常用在什么場合？

　　　　（1）保存用戶登錄狀態。例如將用戶id存儲于一個cookie內，這樣當用戶下次訪問該頁面時就不需要重新登錄了，現在很多論壇和社區都提供這樣的功能。

　　　　　　　　 cookie還可以設置過期時間，當超過時間期限后，cookie就會自動消失。因此，系統往往可以提示用戶保持登錄狀態的時間：

　　　　　　　　　　常見選項有一個月、三個 月、一年等。?

　　　　　?（2）跟蹤用戶行為。例如一個天氣預報網站，能夠根據用戶選擇的地區顯示當地的天氣情況。如果每次都需要選擇所在地是煩瑣的，

　　　　　　　　　　當利用了 cookie后就會顯得很人性化了，系統能夠記住上一次訪問的地區，當下次再打開該頁面時，

　　　　　　　　　　　　它就會自動顯示上次用戶所在地區的天氣情況。因為一切都是在后臺完成，所以這樣的頁面就像為某個用戶所定制的一樣，

　　　　　　　　　　　　　　使用起來非常方便。?

　　　　　（3）定制頁面。如果網站提供了換膚或更換布局的功能，那么可以使用cookie來記錄用戶的選項，例如：背景色、分辨率等。

　　　　　　　　　　當用戶下次訪問時，仍然可以保存上一次訪問的界面風格。?

　　　　　　（4）創建購物車。正如在前面的例子中使用cookie來記錄用戶需要購買的商品一樣，在結賬的時候可以統一提交。

　　　　　　　　　　例如淘寶網就使用cookie記錄了用戶曾經瀏覽過的商品，方便隨時進行比較。

?

?

　　與cookie相關的的場景

? ?　　　　場景1：注冊用戶?

　　　　　　　　需求：一條cookie保存所有用戶的注冊信息，不能存在相同的用戶名

　　　　　　　　實現如下：

　　　　　　　　　　　　

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title></title><script src="cookiebase.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//cookie 保存7天 onload = function(){document.getElementById("btn").onclick = function(){var name = document.getElementById("username").value;var psw = document.getElementById("psw").value; //不管存不存在cookie 先獲取cookie user部分的值var strCookie = getCookie('user');//判斷一下返回的數據類型 返回json字符串 '[{"name":"jjk","psw":"123456"}]' console.log(typeof strCookie);//使用三目運算判斷是否存在cookie：如果strCookie存在，說明存在含有user部分的cookie，
　　　　　　　　　　　　//但不說明用戶已經注冊，還要繼續往下判斷 將json字符串轉換為json對象 ，如果strCookie不存在
　　　　　　　　　　　　//將strCookie設置為空數組
var aUser =strCookie ? JSON.parse(strCookie):[];var bool = true;
　　　　　　　　　　　　//對aUser的元素進行循環，與輸入的用戶名對比是否一致。一致表示用戶已注冊for(var i=0;i<aUser.length;i++){if(aUser[i].name==name){//用戶已注冊 bool=false;}else{//不能添加用戶 }}
　　　　　　　　　　　　//如果boo==true 表明用戶可以注冊 通過push()把用戶的信息添加到數組aUser里 并將aUser轉化為json字符串
　　　　　　　　　　　　//然后重新設置Cookie if(bool){//用戶可以注冊 aUser.push({"name":name,"psw":psw})console.log(JSON.stringify(aUser));setCookie('user',JSON.stringify( aUser),7,"/")alert('注冊成功')}else{//用戶已注冊 alert('用戶已注冊');}console.log(getCookie('user'));}}</script></head><body>用戶：<input type="text" name="" id="username"/>密碼：<input type="password" name="" id="psw"/><input type="button" name="btn" id="btn" value="注冊" /></body> </html>

　　　　思路：1.獲取到輸入的用戶名和密碼；2.獲取Cookie的user部分 3.判斷Cookie是否存在 4.將輸入的用戶名和密碼和Cookie進行比較（遍歷Cookie的user部分）來判斷用戶是否已注冊。

　　　

?

　　　場景2：用戶登錄

　　　　　　　　需求：輸入的用戶名和密碼存在于cookie中，則判斷用戶登錄成功

　　　　　　　　實現如下：

　　　　

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="cookiebase.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//如果輸入的用戶名和密碼 存在cookie當中//則判斷登錄成功 onload = function(){document.getElementById("btn").onclick = function(){//獲取當前輸入的用戶信息var name = document.getElementById("username").value;var psw = document.getElementById("psw").value;//原生操作// var str = document.cookie;// if(str){// var arr = str.split("; ")// }else{// console.log('無cookie');// } //將用戶信息與當前cookie里面的用戶信息 進行判斷//獲取當前cookie里面的用戶信息var sCookie = getCookie('user');console.log(sCookie);var aUser = sCookie?JSON.parse(sCookie):[];console.log(aUser);if(aUser.length<=0){alert('用戶沒有注冊');}else{//判斷輸入的用戶名和密碼是否存在當前cookie中var bool = false; //用戶不存在for(var i =0;i<aUser.length;i++){//{name：jjk，psw：12345}//判斷用戶名是否存在 用戶的密碼是否正確if(aUser[i].name ==name && aUser[i].psw ==psw){bool = true;//用戶存在 }}if(bool){//將當前的登錄信息存在新的cookie里面，用于判斷當前登錄用戶是誰（一般主頁要用到這條cookie，下面會講到）var user = {"user":name};setCookie('login',JSON.stringify(user),7,'/')console.log(document.cookie);alert('用戶登錄成功');
　　　　　　　　　　　　　　　　//跳轉到主頁location.href="http://localhost/index.html";}else{alert('用戶信息錯誤');}}}}</script></head><body>用戶：<input type="text" name="" id="username" />密碼：<input type="password" name="" id="psw" /><input type="button" name="btn" id="btn" value="登錄" /></body> </html>

?

?

　　場景3：主頁提示用戶登錄

　　　　　需求：主頁顯示用戶名

?

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>主頁</title><script src="cookiebase.js"></script><script>window.onload=function(){var txt=document.getElementById('txt');var strCookie=getCookie('login');console.log(strCookie);var arr=strCookie ? JSON.parse(strCookie):[];console.log(arr.user);if(arr.length<=0){alert('請登錄帳號');}else{txt.innerHTML=arr.user;}}</script> </head> <body>歡迎 ，<span id="txt"></span>回來！<button id="btn">點擊退出</button></body> </html>

?

?場景4：使用cookie保存商品id ?點擊商品跳轉到商品詳情頁

　　　　需求：用戶點擊商品后，自動跳轉到商品詳情頁

?

　　　Session

　　　　　　　　

?

轉載于:https://www.cnblogs.com/first-time/p/6493141.html

總結

以上是生活随笔為你收集整理的JavaScript---详解cookie的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。