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