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

Cookie的類型

會話cookie和持久cookie

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

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

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

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

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

Cookie是如何工作的

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

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

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

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

Cookie的限制和組成

Cookie的限制

Cookie的限制主要有兩條：

1. 訪問cookie時的同源限制

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

同源限制

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

個數(shù)和尺寸限制

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

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

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

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

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

Cookie的組成

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

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

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

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

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

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

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

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

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

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

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

BOM的document.cookie接口

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

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

console.log(document.cookie);

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

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

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

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

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

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

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

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

在Application選項卡中的cookies選項查看cookie：

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

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

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

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

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

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

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

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

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

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

子cookie

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

一種子cookie的格式：

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

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

CORS中的cookie

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

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

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

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

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

分享題目：關(guān)于Cookie的知識的總結(jié)-創(chuàng)新互聯(lián)
標題網(wǎng)址：http://muchs.cn/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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)