JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中創建和讀取 cookie

HTTP cookie(也稱為 web cookie , 瀏覽器 cookie ) 是服務器存儲在用戶瀏覽器中的一小段信息。 Cookie 通常用於會話管理、用戶跟踪和存儲用戶偏好。

在 JavaScript 中,您可以使用 document.cookie 屬性來創建、讀取和刪除 cookie。注意 document.cookie 屬性只能使用 HttpOnly 訪問 cookie 屬性未指定。

創建 Cookie

要在 JavaScript 中創建新的 cookie,請分配 name=value 字符串到 document.cookie

document.cookie = 'name=John Doe'

由於 cookie 值不能包含分號、逗號或空格,因此您需要 encodeURIComponent() 在將值存儲到 cookie 之前對值進行編碼的函數:

document.cookie = `name=${encodeURIComponent('John Doe')}`

Cookie 有效期

默認情況下,上面的cookie生命週期是當前瀏覽器會話,這意味著當用戶關閉瀏覽器時它被刪除。此類 cookie 稱為 會話 cookie .

保留 cookie 在當前瀏覽器會話之外,您需要使用 expires 指定其到期日期 屬性(UTC/GMT 格式)或 max-age 屬性(以秒為單位):

// Set cookie fixed expiration date
document.cookie = `name=${encodeURIComponent('John Doe')}; expires=Sun, 14 August 2022 03:11:45 UTC`

// Set cookie max age, e.g. expire after 7 days
document.cookie = `name=${encodeURIComponent('John Doe')}; max-age=${7 * 24 * 60 * 60}`

Cookie 路徑

默認情況下,同一目錄及其子目錄中的所有網頁都可以使用 cookie。但是,您可以顯式指定 path 屬性以確保 cookie 只能訪問該路徑及其子目錄。

例如,如果設置 path/ ,無論是哪個頁面創建的,cookie 都將在整個網站上可用:

document.cookie = `name=${encodeURIComponent('John Doe')}; path=/`

Cookie 域

默認情況下,cookie 僅可用於設置它們的域中的網頁。但是,您可以使用 domain 屬性以使 cookie 跨子域可用。

例如,如果 help.example.com 上的網頁創建的 cookie 設置它的 path/ 及其domainexample.com ,該 cookie 也可用於 blog.example.com 上的所有網頁 , dash.example.com 等。

document.cookie = `name=${encodeURIComponent('John Doe')}; path=/; domain=example.com`

安全 Cookie

您還可以使用 secure 使 cookie 安全 屬性。此類 cookie 僅通過 HTTPS 等安全(即加密)連接傳輸:

document.cookie = `name=${encodeURIComponent('John Doe')}; path=/; domain=example.com; secure`

最後,讓我們編寫一個 JavaScript 函數,它接受名稱、值、到期日、路徑和域,並添加一個 HTTP cookie:

const setCookie = (name, value, days, path, domain, secure) => {
  let cookie = `${name}=${encodeURIComponent(value)}`

  // Add expiry date
  if (days) {
    const expiry = new Date()
    expiry.setDate(expiry.getDate() + days)
    cookie += `; expires=${expiry.toUTCString()}`
  }

  // Add Path, Domain, and Secure
  if (path) cookie += `; path=${path}`
  if (domain) cookie += `; domain=${domain}`
  if (secure) cookie += `; secure`

  // Set an HTTP cookie
  document.cookie = cookie
}

現在設置一個持續 3 個月的 cookie,使用以下代碼:

setCookie('name', 'John Doe', 90);

讀取 Cookie

document.cookie 屬性以分號分隔的一系列鍵值對的形式返回服務器設置的所有 cookie:

const cookies = document.cookie

console.log(cookies)
// _ga=GA1.2.315746813.1624003242; lesson_completed=false; theme=dark

由於所有值和名稱都是 URL 編碼的,因此您必須使用 decodeURIComponent() 對其進行解碼 方法。

讓我們編寫一個將 cookie 名稱作為輸入並返回其值的函數。如果沒有找到 cookie,它應該返回一個 null 價值。

const getCookie = name => {
  const cookies = document.cookie.split(';')
  for (let i = 0; i < cookies.length; i++) {
    let c = cookies[i].trim().split('=')
    if (c[0] === name) {
      return decodeURIComponent(c[1])
    }
  }
  return ''
}

console.log(getCookie('_ga'))
// GA1.1.1736818142.1621579881

上面的代碼使用了 JavaScript split() 用分號分割 cookie 字符串的方法。然後它遍歷結果數組以匹配請求的cookie的名稱和鍵值對。

更新 Cookie

您可以使用與創建 cookie 相同的名稱、路徑、域和安全選項來更新 cookie:

document.cookie = 'name=Alex; expires=Mon, 15 August 2022 10:52:32 UTC'

或者,您也可以使用上面的 setCookie() 功能:

setCookie('name', 'Alex', 10)

刪除 Cookie

刪除 cookie 非常簡單。您只需使用相同的名稱、路徑、域和安全選項將過期日期設置為過去的某個時間:

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

您也可以使用 setCookie() 刪除cookie的函數:

setCookie('name', '', -1)

閱讀下一篇: 如何在 Spring Boot 中使用 cookie


Tutorial JavaScript 教程
  1. 使用 Node 和 GitHub API 從 JSON 自動創建多個 GitHub 問題

  2. 我們其他人的 Fs-tivus

  3. 如何知道何時應用 CSS 位置粘性

  4. Laravel React - 純度儀表板(免費產品)

  5. 使用 MongoDB-Memory-Server 進行測試

  6. JavaScript 中的階乘函數(帶遞歸)

  7. 了解如何使用 Emotion 庫將 CSS-in-JS 應用到您的 React 應用程序。

  1. var 變量返回未定義?

  2. text 和 textContent 屬性之間的區別

  3. 使用 React Query 構建類似 Instagram 的無限滾動提要

  4. 快速身份驗證的可能奇怪方法 - 用戶註冊表 API 和 Passport

  5. 在網站上混淆電子郵件地址的最佳方法是什麼?

  6. JavaScript 象徵主義

  7. 木偶師簡介

  1. React 初學者速成課程,第 3 部分

  2. 30 多本面向初學者和高級開發人員的最佳 JavaScript 書籍

  3. Array_01 ABC

  4. 附上測試失敗的屏幕截圖 - WebdriverIO