這篇文章給大家介紹如何理解客戶端與服務(wù)器cookie，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),南康企業(yè)網(wǎng)站建設(shè),南康品牌網(wǎng)站建設(shè),網(wǎng)站定制,南康網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,南康網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

認(rèn)識(shí)cookie

第一部分： 概要

cookie是一種早期使用的客戶端存儲(chǔ)機(jī)制（現(xiàn)在仍在廣泛使用），cookie數(shù)據(jù)會(huì)在Web瀏覽器和Web服務(wù)器之間傳輸， 因?yàn)樵缙赾ookie是針對(duì)服務(wù)器腳本設(shè)計(jì)的，所以服務(wù)端腳本可以讀、寫(xiě)存儲(chǔ)在客戶端的cookie的值。 值得注意的是， 任何以cookie形式存儲(chǔ)的值，無(wú)論服務(wù)器端是否需要，每一個(gè)HTTP請(qǐng)求都會(huì)把這些數(shù)據(jù)（cookie數(shù)據(jù)）傳輸?shù)椒?wù)器端。但是cookie的存儲(chǔ)量較小，一般不得超過(guò)4kb，即4096個(gè)字節(jié)。由于存儲(chǔ)能力較弱，現(xiàn)在比較流行的是WebStorage，

Cookie是訪問(wèn)過(guò)的網(wǎng)站創(chuàng)建的文件，用于存儲(chǔ)瀏覽器信息，例如個(gè)人資料。

cookie的缺點(diǎn)：

• 數(shù)據(jù)存儲(chǔ)大小：4kb，作為數(shù)據(jù)存儲(chǔ)容器，卻只有4kb，對(duì)于目前稍微有一些繁雜的頁(yè)面，cookie就不夠用了。

• 安全性問(wèn)題： cookie是在HTTP中明文傳遞的（HTTPs不是，這和協(xié)議有關(guān)，與cookie本身無(wú)關(guān)），所以說(shuō)這是非常不安全的。

• 網(wǎng)絡(luò)負(fù)擔(dān)： 之前提到cookie會(huì)隨著HTTP請(qǐng)求在web瀏覽器和服務(wù)器間傳遞，這是非常浪費(fèi)帶寬的。

HTTP Cookie，通常直接叫做cookie，標(biāo)準(zhǔn)要求服務(wù)器將Set-Cookie作為響應(yīng)的一部分，其中包含會(huì)話信息，這種服務(wù)器響應(yīng)報(bào)文的首部字段可能如下，其中以name為名稱、以value為值，這是要求客戶端發(fā)送name這個(gè)鍵名的cookie值，如下：

HTTP/1.1 200 OK
Content-type: Text/html
Set-Cookie: name=value
Other-header: other-header-value

那么瀏覽器端的請(qǐng)求就是這樣的：

GET /index.html HTTP/1.1Cookie: name=value
Other-header: other-header-value

即把服務(wù)器需要的name的值發(fā)送到服務(wù)器端。

將cookie發(fā)送到服務(wù)器可以使得服務(wù)器知道關(guān)于此用戶的更多信息。

  注意： 每一個(gè)cookie的格式都是這樣的： <cookie名> = <值>； 名稱和值都必須是合法的標(biāo)識(shí)符。

 　　注意： cookie是存在有效期的， 在默認(rèn)情況下，cookie的聲明周期就是在瀏覽器關(guān)閉的時(shí)候結(jié)束，如果想要使得cookie在瀏覽器關(guān)閉之后還可以用，就要為cookie設(shè)置有效期，也就是cookie的實(shí)效日期。

第二部分：cookie查看

我們可以使用 console.log(window.navigator.cookieEnabled) 查看我們自己瀏覽器的cookie功能是否打開(kāi)，它返回一個(gè)布爾值，如果為true就說(shuō)明打開(kāi)了。 

如果打開(kāi)chrome的內(nèi)容設(shè)置中的“阻止網(wǎng)站設(shè)置任何數(shù)據(jù)”這樣我們使用上面的代碼，就可以發(fā)現(xiàn)cookie功能關(guān)閉了，即false。這時(shí)，客戶端就不會(huì)再存儲(chǔ)任何cookie了。

　　實(shí)際上cookie就是一些字符串信息，這些信息放在客戶端的計(jì)算機(jī)上，用于客戶端計(jì)算機(jī)和服務(wù)器之間傳遞信息。我們可以使用 alert(typeof document.cookie) 來(lái)檢測(cè)

在JavaScript中可以通過(guò) document.cookie 來(lái)讀取或設(shè)置這些信息，由于cookie 多用在客戶端和服務(wù)器之間傳遞信息，所以除了JavaScript之外，服務(wù)器端的語(yǔ)言如PHP也可以存取cookie。

 　 由于cookie最終都是以文件形式存放在客戶端，所以查看和修改cookie都是十分方便的，這就是為什么常說(shuō)cookie不能存放重要信息的原因?！?/strong>

第三部分： 關(guān)于cookie的一些限制 

　　cookie有 域和路徑 這個(gè)概念。域就是domin 的概念，因?yàn)闉g覽器是一個(gè)主意安全的環(huán)境，所以不能域之間必然是不能互相訪問(wèn)cookie的(當(dāng)然可以通過(guò)跨域的方式做到就向jsonp)，路徑就是routing的概念，一個(gè)網(wǎng)頁(yè)所創(chuàng)建的cookie只能被與這個(gè)網(wǎng)頁(yè)在同一目錄或子目錄下的網(wǎng)頁(yè)訪問(wèn)，而不能被其他目錄下的網(wǎng)頁(yè)訪問(wèn)。

第四部分： Cookie常見(jiàn)問(wèn)題

cookie存在兩種類型

• 你瀏覽的當(dāng)前網(wǎng)站設(shè)置的cookie。

• 來(lái)自網(wǎng)頁(yè)上嵌入廣告或圖片等其他域來(lái)源的第三方cookie（網(wǎng)站通過(guò)使用這些cookie可以跟蹤你的使用信息）

Cookie的聲明周期大致可以分為兩種狀態(tài)：

• 其一： 即臨時(shí)性質(zhì)的cookie， 當(dāng)前使用的過(guò)程中網(wǎng)站會(huì)儲(chǔ)存一些你的個(gè)人信息，后面就用不到了，所以瀏覽器關(guān)閉之后這些信息就從計(jì)算機(jī)中刪除。

• 其二： 設(shè)置了失效時(shí)間的cookie，比如你的用戶名和密碼通過(guò)cookie李記錄，這樣就不需要每次都自己輸入后登陸而是直接登陸了。 可以設(shè)置保留幾天、幾十天等。

Cookie的兩種清除方式

• 瀏覽器自身的設(shè)置中清除

• 通過(guò)設(shè)置cookie的有效期

• 說(shuō)明： 刪除cookie有可能導(dǎo)致某些網(wǎng)頁(yè)無(wú)法正常運(yùn)行（如：我將cookie功能關(guān)閉，現(xiàn)在寫(xiě)的博文就不能正常提交）

瀏覽器可以通過(guò)設(shè)置接受或拒絕訪問(wèn)cookie，處于性能和功能的考慮，盡量降低cookie的使用數(shù)量。

假如是本地磁盤中的頁(yè)面，chrome的控制臺(tái)是無(wú)法用JavaScript讀寫(xiě)操作 cookie 的，解決辦法...換一個(gè)瀏覽器^_^。

第五部分： cookie基礎(chǔ)用法

一、 簡(jiǎn)單的存取操作

使用js存取cookie時(shí)，必須使用document的cookie屬性，如下：

document.cookie = 'username=zzw';

 注意： 其中username就是cookie的名稱，zzw就是這個(gè)名稱對(duì)應(yīng)的值。 假設(shè) cookie 名稱并不存在，那么就是創(chuàng)建一個(gè)新的 cookie；如果存在就是修改了這個(gè) cookie 名稱對(duì)應(yīng)的值。如果要多次創(chuàng)建 cookie ，重復(fù)使用這個(gè)方法即可。

我們還可以通過(guò)document.cookie.length來(lái)查看有多少對(duì)這樣的cookie。

二、 cookie的讀取操作

下面的代碼是w3school上的例子

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查詢cookie是否為空，為空就return ""　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通過(guò)String對(duì)象的indexOf()來(lái)檢查這個(gè)cookie是否存在，不存在就為 -1　　　　　　　　if (c_start!=-1){ 
　　　　　　　　c_start=c_start + c_name.length+1　　//最后這個(gè)+1其實(shí)就是表示"="號(hào)啦，這樣就獲取到了cookie值的開(kāi)始位置　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其實(shí)我剛看見(jiàn)indexOf()第二個(gè)參數(shù)的時(shí)候猛然有點(diǎn)暈，后來(lái)想起來(lái)表示指定的開(kāi)始索引的位置...這句是為了得到值的結(jié)束位置。因?yàn)樾枰紤]是否是最后一項(xiàng)，所以通過(guò)";"號(hào)是否存在來(lái)判斷　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通過(guò)substring()得到了值。想了解unescape()得先知道escape()是做什么的，都是很重要的基礎(chǔ)，想了解的可以搜索下，在文章結(jié)尾處也會(huì)進(jìn)行講解cookie編碼細(xì)節(jié)　　　　　　} 
　　　　}
　　　　return ""　　}

可以看得出來(lái)，這實(shí)際上就是對(duì)字符串進(jìn)行操作。

三、設(shè)置cookie的有效期

默認(rèn)情況，cookie在瀏覽器關(guān)閉就實(shí)效了，但是我們可以通過(guò)下面的方式來(lái)設(shè)置有效期：

document.cookie = "name=value;expires=date"

上面的data值為GMT時(shí)間（格林威治時(shí)間）的日期型字符串，生成方式如下：

var _date = new Date();

_date.setDate(_date.getDate()+30);

_data.toGMTString();

直接在本機(jī)上運(yùn)行，結(jié)果是："Fri, 21 Apr 2017 19:21:11 GMT"

我們通過(guò) +30 就可以設(shè)置cookie的有效時(shí)間是30天了。注意:setDate和getDate的使用。

第六部分： Cookie路徑概念

默認(rèn)情況下，只有與創(chuàng)建 cookie 的頁(yè)面在同一個(gè)目錄或子目錄下的網(wǎng)頁(yè)才可以訪問(wèn)，這個(gè)是因?yàn)榘踩矫娴目紤]，造成不是所有頁(yè)面都可以隨意訪問(wèn)其他頁(yè)面創(chuàng)建的 cookie。

如：在 "http://www.cnblogs.com/Darren_code/" 這個(gè)頁(yè)面創(chuàng)建一個(gè)cookie，那么在"/Darren_code/"這個(gè)路徑下的頁(yè)面如： "http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"這個(gè)頁(yè)面默認(rèn)就能取到cookie信息，因?yàn)檫@個(gè)頁(yè)面時(shí)上面的路徑的子目錄下的頁(yè)面。而因?yàn)?quot;http://www.cnblogs.com"或者 "http://www.cnblogs.com/xxxx/"不是在同一個(gè)目錄下，所以不能訪問(wèn)cookie了。

第七部分： Cookie安全性

之前說(shuō)到，cookie在報(bào)文和本地文件中，都可以看到，所以不能存放重要的信息，他們都是不安全的。但是cookie中傳遞的內(nèi)容非常重要，就要用加密的方式來(lái)傳輸數(shù)據(jù)。 

　　即如果把cookie的屬性名稱為secure，默認(rèn)的值為空，那么它和服務(wù)器之間就會(huì)通過(guò)https或其他的安全協(xié)議傳輸數(shù)據(jù)，如下：

document.cookie = "username=zzw;secure"

 值得注意的是： 這樣只能保證cookie和服務(wù)器之間的數(shù)據(jù)傳輸是加密的，但是本地文件依舊沒(méi)有加密。所以本地的cookie還是很容易看到的。

第八部分： cookie編碼細(xì)節(jié)

在輸入cookie信息時(shí)不能包含空格、分號(hào)、逗號(hào)等特殊符號(hào)。 而在一般情況下，cookie都是采用未編碼的方式。 所以，在設(shè)置cookie之前應(yīng)當(dāng)使用escape()函數(shù)先將cookie進(jìn)行編碼，在獲取到cookie的時(shí)候使用unescapse（）函數(shù)把值進(jìn)行轉(zhuǎn)換回來(lái)。

關(guān)于如何理解客戶端與服務(wù)器cookie就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。