首頁 >web前端 >js教程 >JavaScript 中的 Cookie 綜合指南

JavaScript 中的 Cookie 綜合指南

Linda Hamilton
Linda Hamilton原創
2024-12-21 00:43:09588瀏覽

Comprehensive Guide to Cookies in JavaScript

JavaScript 中的 Cookie

Cookie 是網站儲存在使用者瀏覽器上的小資料片段。它們通常用於儲存使用者首選項、追蹤會話或維護請求之間的狀態。

JavaScript 提供了建立、讀取和刪除 cookie 的簡單方法,使其成為客戶端儲存和會話管理的重要工具。


1.設定 Cookie

Cookie 是透過將字串指派給 document.cookie 來建立的。

文法

  • key=value:cookie 的鍵值對。
  • expires:到期日(可選)。如果未設置,則該 cookie 是會話 cookie,並在瀏覽器關閉時刪除。
  • 路徑:可存取 cookie 的網站內路徑(預設:目前路徑)。
  • domain:可存取 cookie 的網域(預設:目前網域)。
  • 安全性:Cookie 僅透過 HTTPS 傳送。
  • SameSite:控制跨站點行為(嚴格、寬鬆或無)。

範例


2.讀取 Cookie

document.cookie 屬性將目前網域和路徑的所有 cookie 作為單一字串傳回。

範例

要提取特定的cookie,請解析字串:


3.更新 Cookie

要更新 cookie,請使用相同的按鍵但不同的值或選項再次設定它。

範例


4.刪除 Cookie

要刪除 Cookie,請將其過期日期設定為過去的日期。

範例


5.處理特殊字元

cookie值中的特殊字元必須使用encodeURIComponent進行編碼並使用decodeURIComponent進行解碼。

範例


6.安全考量

  1. 安全標誌
    • 使用安全性來確保 cookie 僅透過 HTTPS 傳輸。
  1. HttpOnly Cookie:

    • 無法透過JavaScript存取(在伺服器端設定)。
  2. SameSite 屬性:

    • 控制跨站點 cookie 行為以防止 CSRF 攻擊。

7. Cookie 屬性總結

Attribute Description
expires Expiration date for the cookie.
path Limits cookie to specific paths.
domain Specifies the domain for the cookie.
secure Ensures cookie is sent over HTTPS.
SameSite Controls cross-site cookie behavior.

8.使用 JavaScript 管理 Cookie

為了讓 cookie 管理更容易,請將常用操作封裝在實用函數中。

範例


9.總結

Cookie 是維護 Web 應用程式狀態的基本工具。正確的處理可確保功能,同時保護使用者資料。

  • 使用 Secure 和 SameSite 以獲得更安全的 cookie。
  • 避免將敏感資訊直接儲存在 Cookie 中。
  • 使用 JavaScript 實用程式來簡化 cookie 管理。

嗨,我是 Abhay Singh Kathayat!
我是一名全端開發人員,擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫:kaashshorts28@gmail.com。

以上是JavaScript 中的 Cookie 綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn