JavaScript操作Cookie指南

一、設置Cookie

設置cookie是Web開發中基本的功能之一，可以用來存儲用戶的信息，如登錄狀態、語言選擇等等。

在JavaScript中，通過document.cookie實現設置cookie，同時支持設置cookie的屬性和選項。

function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

上述代碼中，setCookie()方法接收3個參數：cookie名，cookie值和cookie的過期時間（單位為天）。expires通過將其置為空字符串或提供天數來在一段時間後使cookie過期。path參數指定cookie所屬的路徑。

下面的示例演示如何設置一個名為username的cookie，過期時間為7天：

setCookie("username", "JohnDoe", 7);

二、獲取Cookie

獲取cookie可以用來取得已保存的cookie的值。

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1, c.length);
    }
    if (c.indexOf(nameEQ) == 0) {
      return c.substring(nameEQ.length, c.length);
    }
  }
  return null;
}

上述代碼中，getCookie()方法接收一個參數：cookie的名稱。該方法首先將cookie字符串（通過document.cookie獲取）拆分為多個cookie，然後遍歷所有cookie，通過cookie名稱查找目標cookie，並返回其值。如果未找到指定cookie，則返回null。

下面的示例演示如何獲取名為username的cookie：

var username = getCookie("username");

三、刪除Cookie

刪除cookie是指將保存在客戶端計算機上的cookie刪除。可以根據需要定期刪除cookie以提高Web應用程序的安全性。

function eraseCookie(name) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/;';
}

上述代碼中，eraseCookie()方法接收一個cookie的名稱。該方法設置expires選項來使cookie立即過期，並從瀏覽器中刪除它。

下面的示例演示如何刪除名為username的cookie：

eraseCookie("username");

四、更改Cookie

更改cookie的值與設置cookie的方式類似。唯一的區別是設置cookie時需要更新cookie的值而不是創建一個新cookie。

function updateCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

上述代碼中，updateCookie()方法與setCookie()方法類似，不同之處在於如果存在指定名稱的cookie，則更新其值而不是創建一個新cookie。

下面的示例演示如何更新名為username的cookie：

updateCookie("username", "JaneDoe", 7);

五、Cookie選項

可以在JavaScript中設置cookie的選項以提高cookie的安全性和可靠性。

• secure：設置為true時，表示該cookie只能通過HTTPS安全連接傳輸
• HttpOnly：將cookie標記為HTTP-only，表示它只能通過HTTP或HTTPS連接訪問，從而保護cookie免受惡意腳本的攻擊。
• SameSite：在瀏覽器向同站點發送請求時，只會在匹配域中包含請求的cookie。

下面的示例演示如何設置一個安全的和HTTP-only的cookie：

document.cookie = 'my_cookie_name=my_cookie_value;secure;HttpOnly';

六、總結

本文對JavaScript操作cookie進行了全面的介紹，包括設置、獲取、刪除和更改cookie，以及設置cookie的選項。希望這篇文章對您有所幫助。如果您有任何疑問或建議，請在下面的評論中提出。