怎樣用 JavaScript 操作 Cookie[每日前端夜話0xC4]

2019 年 10 月 7 日
筆記

正文共：1892 字

預計閱讀時間：10 分鐘

作者：Nick Major

翻譯：瘋狂的技術宅

來源：coderrocketfuel

介紹

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

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

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

Cookie 只是存儲在電腦瀏覽器中的小型文本文件。它們包含以下數據：

保存數據的 Name-value 對
日期到期時，該 cookie 失效
應將其發送到的伺服器的域和路徑

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

每個cookie的最大為 4096 位元組
每個域最多20個cookie（每個瀏覽器略有不同）
Cookie是其自己的域名專用的（網站無法讀取其他域的 Cookie，只能是它自己的）
大小限制適用於整個cookie，而不僅僅是它的值

在瀏覽器中，cookie通過文檔對象被公開為 document.cookies。

在下面的章節中，我們將介紹如何用 JavaScript 在瀏覽器中設置、獲取、更新和刪除 Cookie 數據。

讓我們開始吧！

Create Cookies

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

設置 Cookie

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

document.cookie = "userId=nick123"

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

設置 cookie 的過期時間

你還可以向 Cookie 中添加過期時間（UTC），告知瀏覽器應該在什麼時候將其刪除：

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

你可以給 cookie 設置一個空值，並將其過期日期設置為過去的任意時間來刪除 cookie。

如果我們想要刪除前面例子的 cookie "userId" ，請按以下步驟操作：

document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"

很簡單吧？

總結

恭喜！現在你已經知道了如何用 JavaScript 對 cookie 進行設置，讀取，更新和刪除！希望這有助於你進行編碼工作。

原文：https://coderrocketfuel.com/article/how-to-create-read-update-and-delete-cookies-in-javascript