Web 伺服器和 HTTP 伺服器是無狀態的，因此當 Web 伺服器將網頁傳送到瀏覽器時，連線會被斷開，伺服器會忘記與使用者相關的所有內容。

那麼瀏覽器和 Web 伺服器是怎樣記住使用者資訊的？cookie 被髮明出來解決這個問題。

當用戶訪問網頁時，他們的名字、唯一 ID 或其他任何資訊都可以儲存在瀏覽器的 cookie 中。當用戶下次又回到網頁時，cookie 將記住他們的名字或唯一 ID。

Cookie 只是儲存在計算機瀏覽器中的小型文字檔案。它們包含以下資料：

儲存資料的 Name-value 對日期到期時，該 cookie 失效應將其傳送到的伺服器的域和路徑

而cookie也有一些值得一提的限制：

每個cookie的最大為 4096 位元組

每個域最多20個cookie（每個瀏覽器略有不同）

Cookie是其自己的域名專用的（網站無法讀取其他域的 Cookie，只能是它自己的）

大小限制適用於整個cookie，而不僅僅是它的值

在瀏覽器中，cookie透過 DOM 被公開為 document.cookies。

目錄

Create Cookies

Read Cookies

Update Cookies

Delete Cookies

Create Cookies

用 JavaScript 在瀏覽器中設定 cookie 非常簡單！我將在下面向你展示。

設定 Cookie

以下是在瀏覽器中用 JavaScript 建立新 cookie 的執行程式碼：

document.cookie = "userId=nick123"

執行該程式碼後，開啟瀏覽器，你應該能在開發者工具的 Application（Safari 或Chrome）或 Storage（Firefox）中找到該 cookie。

設定 cookie 的過期時間

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"

設定一個 Cookie 路徑

你還可以告訴瀏覽器 cookie 所屬的路徑（預設值是當前頁面的路徑）：

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user"

設定 cookie 域

我們將介紹的最後一段資料是 cookie 所屬的域（預設為當前域）：

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com"

Read Cookies

透過 document.cookie 物件，用 JavaScript 讀取 cookie 也非常簡單：

讀取單個頁面所有的 Cookie

將單個頁面的所有 cookie 作為字串獲取，每個 cookie 用分號分隔：

const cookies = document.cookie

讀取具有特定名稱的Cookie

要訪問具有特定名稱的 cookie，我們需要獲取頁面上所有的 cookie 並解析字串，然後查詢我們想要尋找的 cookie 名稱的匹配項。

這是一個用正則表示式完成此任務的函式：

function getCookieValue(name) {  let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")  return result ? result.pop() : ""}

你這樣使用該函式：

getCookieValue("userId") //returns nick123

這將返回與提供給函式的 name 引數對應的字串值。

如果你還沒有掌握正則表示式，還有另一個同樣功能的函式：

function getCookieValue(name) {  const nameString = name + "="    const value = document.cookie.split(";").filter(item => {    return item.includes(nameString)  })    if (value.length) {    return value[0].substring(nameString.length, value[0].length)  } else {    return ""  }}

用相同的方法使用該函式：

getCookieValue("userId") //returns nick123

Update Cookies

你可以透過建立的方式用新值覆蓋 cookie 來更改它的值。

你可以用此程式碼覆蓋本文前面建立的 cookie "userId" ：

document.cookie = "userId=new_value"

當你再次執行 getCookieValue 函式時，將返回新值：

getCookieValue("userId") //returns new_value

Delete Cookies

document.cookie = "userId=; expires=Thu,