關(guān)于Cookie的知識的總結(jié)-創(chuàng)新互聯(lián)

Cookie的類型

會(huì)話cookie和持久cookie

會(huì)話cookie是一種臨時(shí)cookie，它記錄了用戶訪問站點(diǎn)時(shí)的設(shè)置和偏好，當(dāng)用戶退出瀏覽器時(shí)，會(huì)話cookie就會(huì)被刪除。

創(chuàng)新互聯(lián)服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過十余年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對網(wǎng)站進(jìn)行成都做網(wǎng)站、網(wǎng)站建設(shè)、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

持久cookie的生存時(shí)間更長一些，它存儲(chǔ)在用戶的硬盤上，瀏覽器退出或計(jì)算機(jī)重啟時(shí)他們?nèi)匀淮嬖凇?/p>

會(huì)話cookie與持久cookie之間的唯一區(qū)別就是它們的過期時(shí)間。

如果設(shè)置了Discard參數(shù)（cookie版本1中的參數(shù)），或者沒有設(shè)置Expires或者M(jìn)ax-Age參數(shù)（cookie版本1中的參數(shù)）來說明擴(kuò)展的過期時(shí)間，這個(gè)cookie就是一個(gè)會(huì)話cookie。

Cookie是如何工作的

Cookie可以通過服務(wù)器進(jìn)行設(shè)置，相當(dāng)于服務(wù)器給用戶貼的一個(gè)標(biāo)簽，用于跟蹤用戶的狀態(tài)。

通過服務(wù)器設(shè)置的cookie信息通過響應(yīng)頭返回給瀏覽器，瀏覽器將響應(yīng)頭中的cookie信息保存在本地，當(dāng)下次向服務(wù)器發(fā)送HTTP請求時(shí)，就自動(dòng)將保存的這些cookie信息添加到請求頭中（包含通過document.cookie接口設(shè)置的cookie）。

下面是退出博客園登錄時(shí)的響應(yīng)頭和請求頭，響應(yīng)頭中有Set-Cookie字段，請求頭中有Cookie字段：

通過BOM提供的document.cookie接口，在前端可以對cookie進(jìn)行操作（增、刪、改），本質(zhì)上是對符合一定規(guī)律的一個(gè)字符串進(jìn)行操作，這樣開發(fā)人員就可以利用cookie在本地存儲(chǔ)一些數(shù)據(jù)。當(dāng)然，建議存儲(chǔ)一些非敏感信息。

Cookie的限制和組成

Cookie的限制

Cookie的限制主要有兩條：

1. 訪問cookie時(shí)的同源限制

2. Cookie的個(gè)數(shù)和尺寸限制

同源限制

Cookie在性質(zhì)上是綁定在特定的域名下的。當(dāng)創(chuàng)建了一個(gè)cookie后，再給創(chuàng)建它的域名發(fā)送請求時(shí)，請求頭中都會(huì)包含這個(gè)cookie。這個(gè)限制確保了儲(chǔ)存在cookie中的信息只能讓批準(zhǔn)的域訪問，而無法被其他域訪問。

個(gè)數(shù)和尺寸限制

每個(gè)域名下可綁定的cookie的個(gè)數(shù)是有限的，不同瀏覽器所限制的個(gè)數(shù)不同。

瀏覽器對同域名下cookie個(gè)數(shù)的限制見下表：

瀏覽器	可綁定的cookie的個(gè)數(shù)
IE6	20
IE7	50
Firefox	50
Opera	30
Safari	沒有硬性限制
Chrome	沒有硬性限制

當(dāng)超過單個(gè)域名限制之后還要再設(shè)置cookie，瀏覽器就會(huì)清除以前設(shè)置的cookie。

瀏覽器中對于單個(gè)cookie的尺寸也有限制，一般限制在4MB。尺寸限制影響到一個(gè)域名下的所有cookie，而并非每個(gè)cookie單獨(dú)限制。

Cookie的組成

名稱和值 name = value：必填。name和value都是字符序列，除非包含在雙引號內(nèi)，否則不包括分號、逗號、等號和空格。Web服務(wù)器可以創(chuàng)建任意的name=value關(guān)聯(lián)，瀏覽器在后繼對站點(diǎn)的訪問中會(huì)將其送會(huì)給web服務(wù)器。

域 domain：可選。表示該cookie對于哪個(gè)域是有效的。所有向該域發(fā)送的請求中都會(huì)包含這個(gè)cookie信息。這個(gè)值可以包含子域（如www.wrox.com，表示該cookie信息只向該域名發(fā)送），也可以不包含（如.wrox.com，則對于wrox.com的所有子域都有效）。如果沒有明確規(guī)定，那么這個(gè)域會(huì)被認(rèn)作來自設(shè)置該cookie的那個(gè)服務(wù)器所在的域。

路徑 path：可選。通過這個(gè)字段可以為服務(wù)器上特定的文檔分配cookie。如果path字段是一個(gè)URL路徑前綴，就可以附加一個(gè)cookie。例如：路徑 /foo與 /foobar和 /foo/bar.html相匹配。路徑 / 與域名中的所有內(nèi)容都匹配。默認(rèn)值是設(shè)置 Cookie 時(shí)的當(dāng)前目錄。

失效時(shí)間 expires（新版的cookie規(guī)范中是max-age字段）：可選。這個(gè)字段會(huì)指定一個(gè)日期字符串，用來定義cookie的實(shí)際生存期。一旦到了這個(gè)日期，就不再存儲(chǔ)或發(fā)布這個(gè)cookie了，該cookie就會(huì)被刪除。如果設(shè)置的日期是以前的時(shí)間，則cookie會(huì)被立刻刪除。

日期格式為GMT格式：Wdy, DD-Mon-YYYY HH:MM:SS GMT。

安全標(biāo)志 secure：可選。該字段不是鍵值對的形式，如果要指定該字段，只要在設(shè)置cookie時(shí)添加secure字符即可。設(shè)置了該字段后，該cookie只有在使用SSL連接的時(shí)候才發(fā)送到服務(wù)器。例如：指定域?yàn)閣ww.wrox.com的cookie，在制定了secure字段后，該cookie只能發(fā)送給https://www.wrox.com，而發(fā)送給http://www.wrox.com的請求不會(huì)添加該cookie。

HTTP專用 HttpOnly：可選。該字段只能在服務(wù)端設(shè)置，表示該cookie是否能通過JS（BOM的document.cookie接口）去訪問。默認(rèn)情況下HttpOnly字段為空，表示可以通過JS訪問該cookie。

按照規(guī)范，開發(fā)人員無法利用JS在前端修改cookie的HttpOnly字段，不過有的瀏覽器沒有這個(gè)限制，具體看這篇文章：瀏覽器中因cookie設(shè)置HttpOnly標(biāo)志引起的安全問題

關(guān)于如何在服務(wù)端設(shè)置該字段，請看這篇文章：關(guān)于Cookie安全性設(shè)置的那些事

注意：域、路徑、失效時(shí)間、安全標(biāo)志（secure）和HttpOnly字段都是服務(wù)器給瀏覽器的指示，告訴瀏覽器如何存儲(chǔ)和發(fā)送cookie，這些參數(shù)并不會(huì)作為發(fā)送到服務(wù)器的cookie信息的一部分，只有cookie中的名值對兒（name=value）才會(huì)被發(fā)送。

在前面的圖片中，響應(yīng)頭中的一個(gè)Set-Cookie就代表一個(gè)cookie；請求頭中的Cookie字段中可以包含多個(gè)cookie的名值對兒，而不是僅包含一個(gè)cookie的名值對兒。

BOM的document.cookie接口

當(dāng)用來獲取cookie時(shí)，document.cookie返回當(dāng)前頁面可用的所有cookie的字符串，一系列由分號隔開的名值對兒。

例如，我在Chrome中打開這個(gè)頁面：https://segmentfault.com/a/1190000004556040，在控制臺中輸入以下代碼：

console.log(document.cookie);

控制臺中會(huì)輸出以下結(jié)果：

PHPSESSID=web2~f57e474e4a8mc396h5du05qsa0;
Hm_lvt_e23800c454aa573c0ccb16b52665ac26=1495500966; 
Hm_lpvt_e23800c454aa573c0ccb16b52665ac26=1495500966;
_ga=GA1.2.1399344530.1495500966; 
_gid=GA1.2.584865054.1495500966; 
showRegister2=; 
showRegister=

有七個(gè)由分號分隔得名值對兒，表示有七個(gè)cookie可用（所有名字和值都是經(jīng)過URL編碼的，所以必須使用decodeURIComponent()來解碼。）。

點(diǎn)擊開發(fā)者工具中的Application選項(xiàng)，在左邊找到Cookies下拉菜單，點(diǎn)擊第一個(gè)域名，就可以看到這七個(gè)cookie的詳細(xì)信息。具體如下：

當(dāng)用于設(shè)置cookie時(shí)，document.cookie可以設(shè)置一個(gè)新的cookie字符串，這個(gè)cookie字符串會(huì)被解釋并添加到當(dāng)前現(xiàn)有的cookie集合中。其中名值對兒（name=value）是必須的（最好用encodeURIComponent()對name和value進(jìn)行編碼），其它字段在cookie的組成部分已做過介紹。

通過document.cookie設(shè)置的cookie并不會(huì)覆蓋現(xiàn)有的cookie，除非設(shè)置的cookie的name在現(xiàn)有cookie集合中已經(jīng)存在，并且path/domain/secure這幾個(gè)選項(xiàng)一定要和舊cookie 保持一樣。否則不會(huì)修改舊cookie，而是添加了一個(gè)新的 cookie。

例子（使用wamp環(huán)境）：

PHP代碼：

<?php setcookie("abc", "test",null, '/' );   ?>

HTML代碼：

<button id="btn" type="button" value="submit">發(fā)送請求</button><button id="display-cookie" type="button" value="submit">顯示cookie</button><button id="reset-cookie" type="button" value="submit">設(shè)置cookie</button>

JS代碼：

function myAJAX(url) {    var xhr  = new XMLHttpRequest();
    xhr.onreadystatechange = function() {        if(xhr.readyState === 4) {            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                console.log(xhr.responseText);
                console.log(xhr.responseXML);
            } else {
                console.log(xhr.statusText);
                console.log(xhr.status);
            }
        }
    };
    xhr.open("get",url,true);//true表示異步，false表示同步
    //此處設(shè)置頭部信息
    xhr.send(null);
}function init(){    var btn = document.getElementById('btn');    var displayCookie = document.getElementById('display-cookie');    var resetCookie = document.getElementById('reset-cookie');    var removeCookie = document.getElementById('remove-cookie');
    btn.addEventListener('click',function(event) {        var url = 'cookie.php';
        myAJAX(url);
    },false);
    
    displayCookie.addEventListener('click',function(event) {
        console.log(document.cookie);
    },false);

    resetCookie.addEventListener('click',function(event) {
        document.cookie = "abc=ok;path=/"
    },false);
}
init();

 第一次打開該頁面時(shí)，點(diǎn)擊顯示cookie按鈕，控制臺無輸出內(nèi)容，谷歌開發(fā)者工具中Application選項(xiàng)卡中的cookie選項(xiàng)中也為空。

點(diǎn)擊發(fā)送請求按鈕，在Network選項(xiàng)卡中查看頭部信息：

在Application選項(xiàng)卡中的cookies選項(xiàng)查看cookie：

 現(xiàn)在點(diǎn)擊顯示cookie按鈕：

只顯示出了名值對兒，沒有顯示該cookie的其它字段的信息。

接下來點(diǎn)擊設(shè)置cookie按鈕，重設(shè)該cookie，然后再點(diǎn)擊顯示cookie按鈕：

該cookie的值被重設(shè)為了ok。

我們再點(diǎn)擊發(fā)送請求按鈕，看看這一次請求的頭部信息：

請求頭中的Cookie字段是瀏覽器發(fā)送給服務(wù)器的cookie信息，cookie的值之前被我們設(shè)置為了ok。響應(yīng)頭中的Set-Cookie字段是服務(wù)器返回給瀏覽器的cookie信息（實(shí)際上這時(shí)，cookie的值又被設(shè)置為了test）（我只是描述這個(gè)現(xiàn)象，不知道理解的對不對。）。

沒有刪除已有cookie的直接方法。所以，需要使用相同的路徑（path）、域（domain）和安全選項(xiàng)（secure）再次設(shè)置原cookie，并將失效時(shí)間設(shè)置為過去時(shí)間。

通過document.cookie設(shè)置的cookie也會(huì)被瀏覽器添加到請求頭中。

舉例，用document.cookie設(shè)置cookie：

document.cookie = encodeURIComponent(“username”) + “=” +encodeURIComponent(“jack”) + “; domain=.wrox.com; path=/”;

子cookie

子cookie是存放在單個(gè)cookie中的更小段的數(shù)據(jù)。也就是使用cookie值來存儲(chǔ)多個(gè)名值對兒。

一種子cookie的格式：

name=name1=value1&name2=value2&name3=value3&name4=value4

本質(zhì)上還是字符串的操作。

CORS中的cookie

（摘自阮一峰老師的文章：跨域資源共享 CORS 詳解）

CORS請求默認(rèn)不發(fā)送Cookie和HTTP認(rèn)證信息。如果要把Cookie發(fā)到服務(wù)器，一方面要服務(wù)器同意，指定Access-Control-Allow-Credentials字段為true。另一方面，開發(fā)者必須在AJAX請求中打開XMLHttpRequest對象的withCredentials屬性。否則，即使服務(wù)器同意發(fā)送Cookie，瀏覽器也不會(huì)發(fā)送。或者，服務(wù)器要求設(shè)置Cookie，瀏覽器也不會(huì)處理。

但是，如果省略withCredentials設(shè)置，有的瀏覽器還是會(huì)一起發(fā)送Cookie。這時(shí)，可以顯式關(guān)閉withCredentials。

需要注意的是，如果要發(fā)送Cookie，Access-Control-Allow-Origin就不能設(shè)為星號，必須指定明確的、與請求網(wǎng)頁一致的域名。同時(shí)，Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳，其他域名的Cookie并不會(huì)上傳，且（跨源）原網(wǎng)頁代碼中的document.cookie也無法讀取服務(wù)器域名下的Cookie。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：關(guān)于Cookie的知識的總結(jié)-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://bm7419.com/article48/ippep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、企業(yè)網(wǎng)站制作、建站公司、定制開發(fā)、網(wǎng)站制作、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)