JavaScript中如何對Cookie進行操作

本篇內容主要講解“JavaScript中如何對Cookie進行操作”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript中如何對Cookie進行操作”吧!

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

• 保存數據的 Name-value 對

• 日期到期時，該 cookie 失效

• 應將其發(fā)送到的服務器的域和路徑

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

• 每個cookie的最大為 4096 字節(jié)

• 每個域最多20個cookie(每個瀏覽器略有不同)

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

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

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

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

Create Cookies

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

(1) 設置 Cookie

以下是在瀏覽器中用 JavaScript 創(chuàng)建新 cookie 的執(zhí)行代碼：

document.cookie = "userId=nick123"

運行該代碼后，打開瀏覽器，你應該能在開發(fā)者工具的 Application(Safari 或Chrome)或 Storage(Firefox)中找到該  cookie。

(2) 設置 cookie 的過期時間

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

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

(3) 設置一個 Cookie 路徑

你還可以告訴瀏覽器 cookie 所屬的路徑(默認值是當前頁面的路徑)：

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

(4) 設置 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 也非常簡單：

(1) 讀取單個頁面所有的 Cookie

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

const cookies = document.cookie

(2) 讀取具有特定名稱的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 namenameString = 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

你可以通過創(chuàng)建的方式用新值覆蓋 cookie 來更改它的值。

你可以用此代碼覆蓋本文前面創(chuàng)建的 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進行操作”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！