JavaScript Cookie

2018-07-24 11:52 更新

目錄

概述

Cookie 是服務器保存在瀏覽器的一小段文本信息,每個 Cookie 的大小一般不能超過4KB。瀏覽器每次向服務器發(fā)出請求,就會自動附上這段信息。

Cookie 保存以下幾方面的信息。

  • Cookie的名字
  • Cookie的值
  • 到期時間
  • 所屬域名(默認是當前域名)
  • 生效的路徑(默認是當前網(wǎng)址)

舉例來說,如果當前URL是www.example.com,那么Cookie的路徑就是根目錄/。這意味著,這個Cookie對該域名的根路徑和它的所有子路徑都有效。如果路徑設為/forums,那么這個Cookie只有在訪問www.example.com/forums及其子路徑時才有效。

瀏覽器可以設置不接受 Cookie,也可以設置不向服務器發(fā)送 Cookie。window.navigator.cookieEnabled屬性返回一個布爾值,表示瀏覽器是否打開 Cookie 功能。

document.cookie屬性返回當前網(wǎng)頁的 Cookie。

// 讀取當前網(wǎng)頁的所有cookie
var allCookies = document.cookie;

由于document.cookie返回的是分號分隔的所有Cookie,所以必須手動還原,才能取出每一個Cookie的值。

var cookies = document.cookie.split(';');

for (var i = 0; i < cookies.length; i++) {
  // cookies[i] name=value形式的單個Cookie
}

document.cookie屬性是可寫的,可以通過它為當前網(wǎng)站添加Cookie。

document.cookie = 'fontSize=14';

Cookie的值必須寫成key=value的形式。注意,等號兩邊不能有空格。另外,寫入Cookie的時候,必須對分號、逗號和空格進行轉(zhuǎn)義(它們都不允許作為Cookie的值),這可以用encodeURIComponent方法達到。

但是,document.cookie一次只能寫入一個Cookie,而且寫入并不是覆蓋,而是添加。

document.cookie = 'test1=hello';
document.cookie = 'test2=world';
document.cookie
// test1=hello;test2=world

document.cookie屬性讀寫行為的差異(一次可以讀出全部Cookie,但是只能寫入一個Cookie),與服務器與瀏覽器之間的Cookie通信格式有關。瀏覽器向服務器發(fā)送Cookie的時候,是一行將所有Cookie全部發(fā)送。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2
Accept: */*

上面的頭信息中,Cookie字段是瀏覽器向服務器發(fā)送的Cookie。

服務器告訴瀏覽器需要儲存Cookie的時候,則是分行指定。

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: cookie_name1=cookie_value1
Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT

上面的頭信息中,Set-Cookie字段是服務器寫入瀏覽器的Cookie,一行一個。

如果仔細看瀏覽器向服務器發(fā)送的Cookie,就會意識到,Cookie協(xié)議存在問題。對于服務器來說,有兩點是無法知道的。

  • Cookie的各種屬性,比如何時過期。
  • 哪個域名設置的Cookie,因為Cookie可能是一級域名設的,也可能是任意一個二級域名設的。

除了Cookie本身的內(nèi)容,還有一些可選的屬性也是可以寫入的,它們都必須以分號開頭。

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

上面的Set-Cookie字段,用分號分隔多個屬性。它們的含義如下。

(1)value屬性

value屬性是必需的,它是一個鍵值對,用于指定Cookie的值。

(2)expires屬性

expires屬性用于指定Cookie過期時間。它的格式采用Date.toUTCString()的格式。

如果不設置該屬性,或者設為null,Cookie只在當前會話(session)有效,瀏覽器窗口一旦關閉,當前Session結束,該Cookie就會被刪除。

瀏覽器根據(jù)本地時間,決定Cookie是否過期,由于本地時間是不精確的,所以沒有辦法保證Cookie一定會在服務器指定的時間過期。

(3)domain屬性

domain屬性指定Cookie所在的域名,比如example.com.example.com(這種寫法將對所有子域名生效)、subdomain.example.com

如果未指定,默認為設定該Cookie的域名。所指定的域名必須是當前發(fā)送Cookie的域名的一部分,比如當前訪問的域名是example.com,就不能將其設為google.com。只有訪問的域名匹配domain屬性,Cookie才會發(fā)送到服務器。

(4)path 屬性

path屬性用來指定路徑,必須是絕對路徑(比如//mydir),如果未指定,默認為請求該 Cookie 的網(wǎng)頁路徑。

只有path屬性匹配向服務器發(fā)送的路徑,Cookie 才會發(fā)送。這里的匹配不是絕對匹配,而是從根路徑開始,只要path屬性匹配發(fā)送路徑的一部分,就可以發(fā)送。比如,path屬性等于/blog,則發(fā)送路徑是/blog或者/blog/roll,Cookie都會發(fā)送。path屬性生效的前提是domain屬性匹配。

(5)secure 屬性

secure屬性用來指定Cookie只能在加密協(xié)議HTTPS下發(fā)送到服務器。

該屬性只是一個開關,不需要指定值。如果通信是HTTPS協(xié)議,該開關自動打開。

(6)max-age

max-age屬性用來指定Cookie有效期,比如60 * 60 * 24 * 365(即一年31536e3秒)。

(7)HttpOnly

HttpOnly屬性用于設置該Cookie不能被JavaScript讀取,詳見下文的說明。

以上屬性可以同時設置一個或多個,也沒有次序的要求。如果服務器想改變一個早先設置的Cookie,必須同時滿足四個條件:Cookie的keydomain、pathsecure都匹配。也就是說,如果原始的Cookie是用如下的Set-Cookie設置的。

Set-Cookie: key1=value1; domain=example.com; path=/blog

改變上面這個cookie的值,就必須使用同樣的Set-Cookie

Set-Cookie: key1=value2; domain=example.com; path=/blog

只要有一個屬性不同,就會生成一個全新的Cookie,而不是替換掉原來那個Cookie。

Set-Cookie: key1=value2; domain=example.com; path=/

上面的命令設置了一個全新的同名Cookie,但是path屬性不一樣。下一次訪問example.com/blog的時候,瀏覽器將向服務器發(fā)送兩個同名的Cookie。

Cookie: key1=value1; key1=value2

上面代碼的兩個Cookie是同名的,匹配越精確的Cookie排在越前面。

瀏覽器設置這些屬性的寫法如下。

document.cookie = 'fontSize=14; '
  + 'expires=' + someDate.toGMTString() + '; '
  + 'path=/subdirectory; '
  + 'domain=*.example.com';

另外,這些屬性只能用來設置Cookie。一旦設置完成,就沒有辦法讀取這些屬性的值。

刪除一個Cookie的簡便方法,就是設置expires屬性等于0,或者等于一個過去的日期。

document.cookie = 'fontSize=;expires=Thu, 01-Jan-1970 00:00:01 GMT';

上面代碼中,名為fontSize的Cookie的值為空,過期時間設為1970年1月1月零點,就等同于刪除了這個Cookie。

Cookie的限制

瀏覽器對Cookie數(shù)量的限制,規(guī)定不一樣。目前,F(xiàn)irefox是每個域名最多設置50個Cookie,而Safari和Chrome沒有域名數(shù)量的限制。

所有Cookie的累加長度限制為4KB。超過這個長度的Cookie,將被忽略,不會被設置。

由于Cookie可能存在數(shù)量限制,有時為了規(guī)避限制,可以將cookie設置成下面的形式。

name=a=b&c=d&e=f&g=h

上面代碼實際上是設置了一個Cookie,但是這個Cookie內(nèi)部使用&符號,設置了多部分的內(nèi)容。因此,讀取這個Cookie的時候,就要自行解析,得到多個鍵值對。這樣就規(guī)避了cookie的數(shù)量限制。

同源政策

瀏覽器的同源政策規(guī)定,兩個網(wǎng)址只要域名相同和端口相同,就可以共享Cookie。

注意,這里不要求協(xié)議相同。也就是說,http://example.com設置的Cookie,可以被https://example.com讀取。

設置Cookie的時候,如果服務器加上了HttpOnly屬性,則這個Cookie無法被JavaScript讀取(即document.cookie不會返回這個Cookie的值),只用于向服務器發(fā)送。

Set-Cookie: key=value; HttpOnly

上面的這個Cookie將無法用JavaScript獲取。進行AJAX操作時,XMLHttpRequest對象也無法包括這個Cookie。這主要是為了防止XSS攻擊盜取Cookie。

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號