用 JavaScript 操做 Cookie

時間 2019-11-07

標籤 javascript cookie 欄目 JavaScript 简体版

原文原文鏈接

做者：Nick Major
翻譯：瘋狂的技術宅javascript

原文：https://coderrocketfuel.com/a...前端

未經容許嚴禁轉載java

介紹

Web 服務器和 HTTP 服務器是無狀態的，所以當 Web 服務器將網頁發送到瀏覽器時，鏈接會被斷開，服務器會忘記與用戶相關的全部內容。程序員

那麼瀏覽器和 Web 服務器是怎樣記住用戶信息的？cookie 被髮明出來解決這個問題。面試

當用戶訪問網頁時，他們的名字、惟一 ID 或其餘任何信息均可以存儲在瀏覽器的 cookie 中。當用戶下次又回到網頁時，cookie 將記住他們的名字或惟一 ID。正則表達式

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

保存數據的 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 進行設置，讀取，更新和刪除！但願這有助於你進行編碼工做。

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

更多文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。