App下載

cookie的介紹和使用

猿友 2021-02-22 14:01:19 瀏覽數(shù) (10170)
反饋

一、概述

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

Cookie 主要保存狀態(tài)信息，以下是一些主要用途。

  • 對話（session）管理：保存登錄、購物車等需要記錄的信息。
  • 個性化信息：保存用戶的偏好，比如網(wǎng)頁的字體大小、背景色等等。
  • 追蹤用戶：記錄和分析用戶行為。

Cookie 不是一種理想的客戶端儲存機制。它的容量很?。?KB），缺乏數(shù)據(jù)操作接口，而且會影響性能。客戶端儲存應(yīng)該使用 Web storage API 和 IndexedDB。只有那些每次請求都需要讓服務(wù)器知道的信息，才應(yīng)該放在 Cookie 里面。

有關(guān)對Web storage的介紹，可以看這篇博客：sessionStorage 和 localStorage 的使用

每個 Cookie 都有以下幾方面的元數(shù)據(jù)。

  • Cookie 的名字
  • Cookie 的值（真正的數(shù)據(jù)寫在這里面）
  • 到期時間（超過這個時間會失效）
  • 所屬域名（默認為當前域名）
  • 生效的路徑（默認為當前網(wǎng)址）

舉例來說，用戶訪問網(wǎng)址 ?www.example.com?，服務(wù)器在瀏覽器寫入一個 Cookie。這個 Cookie 的所屬域名為 ?www.example.com?，生效路徑為根路徑 ?/?。

如果 Cookie 的生效路徑設(shè)為? /user?，那么這個 Cookie 只有在訪問? www.example.com/use?r 及其子路徑時才有效。以后，瀏覽器訪問某個路徑之前，就會找出對該域名和路徑有效，并且還沒有到期的 Cookie，一起發(fā)送給服務(wù)器。

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

window.navigator.cookieEnabled // true

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

不同瀏覽器對 Cookie 數(shù)量和大小的限制，是不一樣的。一般來說，單個域名設(shè)置的 Cookie 不應(yīng)超過30個，每個 Cookie 的大小不能超過4KB。超過限制以后，Cookie 將被忽略，不會被設(shè)置。

兩個網(wǎng)址只要域名相同，就可以共享 Cookie。 注意，這里不要求協(xié)議相同。也就是說，?http://example.com ?設(shè)置的 Cookie，可以被 ?https://example.com? 讀取。

二、Cookie 與 HTTP 協(xié)議

Cookie 由 HTTP 協(xié)議生成，也主要是供 HTTP 協(xié)議使用。

1、HTTP 回應(yīng)：Cookie 的生成

服務(wù)器如果希望在瀏覽器保存 Cookie，就要在 HTTP 回應(yīng)的頭信息里面，放置一個 ?Set-Cookie? 字段。

Set-Cookie:foo=bar

上面代碼會在瀏覽器保存一個名為 foo 的 Cookie，它的值為 bar。

HTTP 回應(yīng)可以包含多個 ?Set-Cookie? 字段，即在瀏覽器生成多個 Cookie。

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

除了 Cookie 的值，Set-Cookie字段還可以附加 Cookie 的屬性。一個Set-Cookie字段里面，可以同時包括多個屬性，沒有次序的要求。

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

在這里插入圖片描述

2、HTTP 請求：Cookie 的發(fā)送

瀏覽器向服務(wù)器發(fā)送 HTTP 請求時，每個請求都會帶上相應(yīng)的 Cookie。也就是說，把服務(wù)器早前保存在瀏覽器的這段信息，再發(fā)回服務(wù)器。這時要使用 HTTP 頭信息的 ?Cookie? 字段。

// 會向服務(wù)器發(fā)送名為 foo的 Cookie，值為 bar。
Cookie: foo=bar

// Cookie字段可以包含多個 Cookie，使用分號（;）分隔。
Cookie: name=value; name2=value2; name3=value3

下面是一個例子。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

在這里插入圖片描述

三、Cookie 的屬性

1、Expires，Max-Age

?Expires? 屬性指定一個具體的到期時間，到了指定時間以后，瀏覽器就不再保留這個 Cookie。它的值是 UTC 格式，可以使用?Date.prototype.toUTCString()? 進行格式轉(zhuǎn)換。

如果不設(shè)置該屬性，或者設(shè)為null，Cookie 只在當前會話（session）有效，瀏覽器窗口一旦關(guān)閉，當前會話結(jié)束，該 Cookie 就會被刪除。另外，瀏覽器根據(jù)本地時間，決定 Cookie 是否過期，由于本地時間是不精確的，所以沒有辦法保證 Cookie 一定會在服務(wù)器指定的時間過期。

?Max-Age? 屬性指定從現(xiàn)在開始 Cookie 存在的秒數(shù)，比如 60 * 60 * 24 * 365（即一年）。過了這個時間以后，瀏覽器就不再保留這個 Cookie。

如果同時指定了 ?Expires? 和 ?Max-Age?，那么? Max-Age? 的值將優(yōu)先生效。

如果 ?Set-Cookie? 字段沒有指定?Expires?或?Max-Age?屬性，那么這個 Cookie 就是 Session Cookie，即它只在本次對話存在，一旦用戶關(guān)閉瀏覽器，瀏覽器就不會再保留這個 Cookie。

使用 Node 創(chuàng)建一個服務(wù)器來模擬演示：

const http = require('http')
const fs = require('fs')

http.createServer(function (request, response) {
  console.log('request come', request.url)
  
  const html = fs.readFileSync('test.html', 'utf8')
  response.writeHead(200, {
    'Content-Type': 'text/html',
    'Set-Cookie': ['id=123;max-age=2', 'abc=456;HttpOnly']
  })
  response.end(html)

}).listen(8888)

console.log('http://127.0.0.1:8888')

在這里插入圖片描述

在這里插入圖片描述

2、Domain，Path

?Domain?屬性指定瀏覽器發(fā)出 HTTP 請求時，哪些域名要附帶這個 Cookie。

  • 如果沒有指定該屬性，瀏覽器會默認將其設(shè)為當前域名，這時子域名將不會附帶這個 Cookie。比如，?example.com? 不設(shè)置 Cookie 的domain屬性，那么 sub.example.com 將不會附帶這個 Cookie。
  • 如果指定了domain屬性，那么子域名也會附帶這個 Cookie。如果服務(wù)器指定的域名不屬于當前域名，瀏覽器會拒絕這個 Cookie。
  • 一句話總結(jié)：Domain標識指定了哪些主機可以接受Cookie。如果不指定，默認為當前主機(不包含子域名)。如果指定了Domain ，則一般包含子域名。

?Path?屬性指定瀏覽器發(fā)出 HTTP 請求時，哪些路徑要附帶這個 Cookie。只要瀏覽器發(fā)現(xiàn)，Path屬性是 HTTP 請求路徑的開頭一部分，就會在頭信息里面帶上這個 Cookie。比如，PATH屬性是 ?/?，那么請求 ?/docs ?路徑也會包含該 Cookie。當然，前提是域名必須一致。

3、Secure，HttpOnly

?Secure ?屬性指定瀏覽器只有在加密協(xié)議 HTTPS 下，才能將這個 Cookie 發(fā)送到服務(wù)器。另一方面，如果當前協(xié)議是 HTTP，瀏覽器會自動忽略服務(wù)器發(fā)來的Secure屬性。該屬性只是一個開關(guān)，不需要指定值。如果通信是 HTTPS 協(xié)議，該開關(guān)自動打開。

?HttpOnly? 屬性指定該 Cookie 無法通過 JavaScript 腳本拿到，主要是 ?document.cookie? 屬性、?XMLHttpRequest? 對象和 ?Request API? 都拿不到該屬性。這樣就防止了該 Cookie 被腳本讀到，只有瀏覽器發(fā)出 HTTP 請求時，才會帶上該 Cookie。出于安全考慮。

四、document.cookie

?document.cookie? 屬性用于讀寫當前網(wǎng)頁的 Cookie。讀取的時候，它會返回當前網(wǎng)頁的所有 Cookie，前提是該 Cookie 不能有HTTPOnly屬性。

document.cookie // "foo=bar;baz=bar"

上面代碼從? document.cookie ?一次性讀出兩個 Cookie，它們之間使用分號分隔。必須手動還原，才能取出每一個 Cookie 的值。這就是cookie存取數(shù)據(jù)不方便的地方，它沒有完善的存取數(shù)據(jù)的api讓我們用，我們必須手動的從中提取自己需要的數(shù)據(jù)。

?document.cookie? 屬性是可寫的，可以通過它為當前網(wǎng)站添加 Cookie。寫入的時候，Cookie 的值必須寫成?key=value?的形式。注意，等號兩邊不能有空格。? document.cookie?一次只能寫入一個 Cookie，而且寫入并不是覆蓋，而是添加。

document.cookie = 'fontSize=14';

// 最終只會有 test1=456 被寫進去
document.cookie = 'test1=456;hahah=123'

?document.cookie ?讀寫行為的差異（一次可以讀出全部 Cookie，但是只能寫入一個 Cookie），與 HTTP 協(xié)議的 Cookie 通信格式有關(guān)。

  • 瀏覽器向服務(wù)器發(fā)送 Cookie 的時候，Cookie字段是使用一行將所有 Cookie 全部發(fā)送；
  • 服務(wù)器向瀏覽器設(shè)置 Cookie 的時候，?Set-Cookie?字段是一行設(shè)置一個 Cookie。

刪除一個現(xiàn)存 Cookie 的唯一方法，是設(shè)置它的? expires? 屬性為一個過去的日期。

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

五、參考資料

HTTP cookies 詳解


工具

0 人點贊