JavaScript 教程
JavaScript Cookie
Cookie 用于存儲(chǔ) web 頁面的用戶信息。
什么是 Cookie？
Cookie 是一些數(shù)據(jù), 存儲(chǔ)于你電腦上的文本文件中。
當(dāng) web 服務(wù)器向?yàn)g覽器發(fā)送 web 頁面時(shí)，在連接關(guān)閉后，服務(wù)端不會(huì)記錄用戶的信息。
Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息":
- 當(dāng)用戶訪問 web 頁面時(shí)，他的名字可以記錄在 cookie 中。
- 在用戶下一次訪問該頁面時(shí)，可以在 cookie 中讀取用戶訪問記錄。
Cookie 以名/值對(duì)形式存儲(chǔ)，如下所示:
當(dāng)瀏覽器從服務(wù)器上請(qǐng)求 web 頁面時(shí)， 屬于該頁面的 cookie 會(huì)被添加到該請(qǐng)求中。服務(wù)端通過這種方式來獲取用戶的信息。
使用 JavaScript 創(chuàng)建Cookie
JavaScript 可以使用 document.cookie 屬性來創(chuàng)建 、讀取、及刪除 cookie。
JavaScript 中，創(chuàng)建 cookie 如下所示：
您還可以為 cookie 添加一個(gè)過期時(shí)間（以 UTC 或 GMT 時(shí)間）。默認(rèn)情況下，cookie 在瀏覽器關(guān)閉時(shí)刪除：
您可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑。默認(rèn)情況下，cookie 屬于當(dāng)前頁面。
使用 JavaScript 讀取 Cookie
在 JavaScript 中, 可以使用以下代碼來讀取 cookie：
 |
document.cookie 將以字符串的方式返回所有的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value; |
|---|
使用 JavaScript 修改 Cookie
在 JavaScript 中，修改 cookie 類似于創(chuàng)建 cookie，如下所示：
舊的 cookie 將被覆蓋。
使用 JavaScript 刪除 Cookie
刪除 cookie 非常簡單。您只需要設(shè)置 expires 參數(shù)為以前的時(shí)間即可，如下所示，設(shè)置為 Thu, 01 Jan 1970 00:00:00 GMT:
注意，當(dāng)您刪除時(shí)不必指定 cookie 的值。
Cookie 字符串
document.cookie 屬性看起來像一個(gè)普通的文本字符串，其實(shí)它不是。
即使您在 document.cookie 中寫入一個(gè)完整的 cookie 字符串, 當(dāng)您重新讀取該 cookie 信息時(shí)，cookie 信息是以名/值對(duì)的形式展示的。
如果您設(shè)置了新的 cookie，舊的 cookie 不會(huì)被覆蓋。 新 cookie 將添加到 document.cookie 中，所以如果您重新讀取document.cookie，您將獲得如下所示的數(shù)據(jù)：
cookie1=value; cookie2=value;
? ? ?
如果您需要查找一個(gè)指定 cookie 值，您必須創(chuàng)建一個(gè)JavaScript 函數(shù)在 cookie 字符串中查找 cookie 值。
JavaScript Cookie 實(shí)例
在以下實(shí)例中，我們將創(chuàng)建 cookie 來存儲(chǔ)訪問者名稱。
首先，訪問者訪問 web 頁面, 他將被要求填寫自己的名字。該名字會(huì)存儲(chǔ)在 cookie 中。
訪問者下一次訪問頁面時(shí)，他會(huì)看到一個(gè)歡迎的消息。
在這個(gè)實(shí)例中我們會(huì)創(chuàng)建 3 個(gè) JavaScript 函數(shù):
- 設(shè)置 cookie 值的函數(shù)
- 獲取 cookie 值的函數(shù)
- 檢測 cookie 值的函數(shù)
設(shè)置 cookie 值的函數(shù)
首先，我們創(chuàng)建一個(gè)函數(shù)用于存儲(chǔ)訪問者的名字：
函數(shù)解析：
以上的函數(shù)參數(shù)中，cookie 的名稱為 cname，cookie 的值為 cvalue，并設(shè)置了 cookie 的過期時(shí)間 expires。
該函數(shù)設(shè)置了 cookie 名、cookie 值、cookie過期時(shí)間。
獲取 cookie 值的函數(shù)
然后，我們創(chuàng)建一個(gè)函數(shù)用于返回指定 cookie 的值：
函數(shù)解析：
cookie 名的參數(shù)為 cname。
創(chuàng)建一個(gè)文本變量用于檢索指定 cookie :cname + "="。
使用分號(hào)來分割 document.cookie 字符串，并將分割后的字符串?dāng)?shù)組賦值給 ca (ca = document.cookie.split(';'))。
循環(huán) ca 數(shù)組 (i=0;i<ca.length;i++)，然后讀取數(shù)組中的每個(gè)值，并去除前后空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
如果沒有找到 cookie, 返回 ""。
檢測 cookie 值的函數(shù)
最后，我們可以創(chuàng)建一個(gè)檢測 cookie 是否創(chuàng)建的函數(shù)。
如果設(shè)置了 cookie，將顯示一個(gè)問候信息。
如果沒有設(shè)置 cookie，將會(huì)顯示一個(gè)彈窗用于詢問訪問者的名字，并調(diào)用 setCookie 函數(shù)將訪問者的名字存儲(chǔ) 365 天：
完整實(shí)例
實(shí)例
運(yùn)行代碼 ?
以下實(shí)例在頁面載入時(shí)執(zhí)行 checkCookie() 函數(shù)。