JavaScript Cookie
Cookie 讓您可以在網頁中儲存使用者資訊。
什麼是 Cookie？
Cookie 是儲存在您計算機上小型文字檔案中的資料。
當 Web 伺服器向瀏覽器傳送網頁後，連線就會關閉，伺服器會忘記關於使用者的一切。
發明 Cookie 是為了解決“如何記住使用者資訊”的問題。
- 當用戶訪問網頁時，他/她的名字可以儲存在一個 Cookie 中。
- 下次使用者訪問該頁面時，Cookie 會“記住”他/她的名字。
Cookie 以名稱-值對的形式儲存，例如
username = John Doe
當瀏覽器向伺服器請求網頁時，屬於該頁面的 Cookie 會新增到請求中。透過這種方式，伺服器可以獲取必要的資料來“記住”使用者資訊。
如果您的瀏覽器關閉了本地 Cookie 支援，以下任何示例都將無法工作。
使用 JavaScript 建立 Cookie
JavaScript 可以使用 document.cookie 屬性建立、讀取和刪除 Cookie。
使用 JavaScript，可以像這樣建立 Cookie：
document.cookie = "username=John Doe";
您還可以新增一個過期日期（以 UTC 時間表示）。預設情況下，當瀏覽器關閉時，Cookie 會被刪除。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
透過路徑引數，您可以告訴瀏覽器 Cookie 屬於哪個路徑。預設情況下，Cookie 屬於當前頁面。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
使用 JavaScript 讀取 Cookie
使用 JavaScript，可以像這樣讀取 Cookie：
let x = document.cookie;
document.cookie 將以一個字串的形式返回所有 Cookie，類似於：cookie1=value; cookie2=value; cookie3=value;
使用 JavaScript 更改 Cookie
使用 JavaScript，您可以像建立 Cookie 一樣更改它：
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
舊的 Cookie 將被覆蓋。
使用 JavaScript 刪除 Cookie
刪除 Cookie 非常簡單。
刪除 Cookie 時無需指定 Cookie 值。
只需將 expires 引數設定為一個過去日期：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您應該定義 Cookie 路徑以確保刪除正確的 Cookie。
如果您不指定路徑，某些瀏覽器將不允許您刪除 Cookie。
Cookie 字串
document.cookie 屬性看起來像一個普通的文字字串。但它不是。
即使您將整個 Cookie 字串寫入 document.cookie，當您再次讀取它時，您只能看到它的名稱-值對。
如果您設定一個新 Cookie，舊的 Cookie 不會被覆蓋。新 Cookie 會新增到 document.cookie 中，因此如果您再次讀取 document.cookie，您將得到類似以下內容：
cookie1=value; cookie2=value;
如果您想查詢某個指定 Cookie 的值，您必須編寫一個 JavaScript 函式，在該 Cookie 字串中搜索 Cookie 值。
JavaScript Cookie 示例
在接下來的示例中，我們將建立一個儲存訪問者姓名的 Cookie。
當訪問者第一次訪問網頁時，會要求他/她填寫姓名。然後該姓名會儲存在 Cookie 中。
下次訪問者訪問同一頁面時，他/她將收到歡迎訊息。
對於此示例，我們將建立 3 個 JavaScript 函式：
- 一個設定 Cookie 值的函式
- 一個獲取 Cookie 值的函式
- 一個檢查 Cookie 值的函式
一個設定 Cookie 的函式
首先，我們建立一個 函式，它將訪問者的姓名儲存在一個 Cookie 變數中：
示例
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
示例說明
上述函式的引數是 Cookie 的名稱 (cname)、Cookie 的值 (cvalue) 和 Cookie 應過期前的天數 (exdays)。
該函式透過將 Cookie 名稱、Cookie 值和過期字串連線起來來設定 Cookie。
一個獲取 Cookie 的函式
然後，我們建立一個 函式，該函式返回指定 Cookie 的值：
示例
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
函式解釋
將 Cookie 名稱作為引數 (cname)。
建立一個變數 (name)，其中包含要搜尋的文字 (cname + "=")。
解碼 Cookie 字串，以處理帶有特殊字元（例如 '$'）的 Cookie。
將 document.cookie 按分號拆分為一個名為 ca 的陣列 (ca = decodedCookie.split(';'))。
遍歷 ca 陣列 (i = 0; i < ca.length; i++)，並讀取每個值 (c = ca[i])。
如果找到 Cookie (c.indexOf(name) == 0)，則返回 Cookie 的值 (c.substring(name.length, c.length))。
如果未找到 Cookie，則返回 ""。
一個檢查 Cookie 的函式
最後，我們建立檢查 Cookie 是否已設定的函式。
如果 Cookie 已設定，它將顯示問候語。
如果 Cookie 未設定，它將顯示一個提示框，要求輸入使用者的姓名，並透過呼叫 setCookie 函式將使用者名稱 Cookie 儲存 365 天。
示例
function checkCookie() {
let username = getCookie("username");
if (username != "") {
alert("歡迎再次光臨 " + username);
} else {
username = prompt("請輸入您的姓名:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
現在一起
示例
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("歡迎再次光臨 " + user);
} else {
user = prompt("請輸入您的姓名:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
自己動手試一試 »
上面的示例在頁面載入時執行 checkCookie() 函式。
