Cookie 用于存儲 web 頁面的用戶信息丁稀。
什么是 Cookie卓研?
Cookie 是一些數(shù)據(jù), 存儲于你電腦上的文本文件中。
當 web 服務(wù)器向瀏覽器發(fā)送 web 頁面時沉唠,在連接關(guān)閉后大脉,服務(wù)端不會記錄用戶的信息搞监。
Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息":
當用戶訪問 web 頁面時,他的名字可以記錄在 cookie 中镰矿。
在用戶下一次訪問該頁面時琐驴,可以在 cookie 中讀取用戶訪問記錄。
Cookie 以名/值對形式存儲秤标,如下所示:
username=John Doe
當瀏覽器從服務(wù)器上請求 web 頁面時绝淡, 屬于該頁面的 cookie 會被添加到該請求中。服務(wù)端通過這種方式來獲取用戶的信息苍姜。
使用 JavaScript 創(chuàng)建Cookie
JavaScript 可以使用 document.cookie 屬性來創(chuàng)建 牢酵、讀取、及刪除 cookie衙猪。
//JavaScript 中馍乙,創(chuàng)建 cookie 如下所示:
document.cookie="username=John Doe";
//可以為 cookie 添加一個過期時間(以 UTC 或 GMT 時間)。默認情況下垫释,cookie 在瀏覽器關(guān)閉時刪除:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
//可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑丝格。默認情況下,cookie 屬于當前頁面饶号。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript 讀取 Cookie
var x = document.cookie;
//document.cookie 將以字符串的方式返回所有的 cookie铁追,
//類型格式: cookie1=value; cookie2=value; cookie3=value;
使用 JavaScript 修改 Cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
//舊的 cookie 將被覆蓋。
使用 JavaScript 刪除 Cookie
刪除 cookie 非常簡單茫船。只需要設(shè)置 expires 參數(shù)為以前的時間即可琅束,如下所示,設(shè)置為 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
//刪除時不必指定 cookie 的值
Cookie 字符串
即使在 document.cookie 中寫入一個完整的 cookie 字符串, 當重新讀取該 cookie 信息時算谈,cookie 信息是以名/值對的形式展示的涩禀。
如果設(shè)置了新的 cookie,舊的 cookie 不會被覆蓋然眼。 新 cookie 將添加到 document.cookie 中艾船,所以如果重新讀取document.cookie,將獲得如下所示的數(shù)據(jù):
cookie1=value; cookie2=value;
如果需要查找一個指定 cookie 值,必須創(chuàng)建一個JavaScript 函數(shù)在 cookie 字符串中查找 cookie 值屿岂。
JavaScript Cookie 實例
首先践宴,訪問者訪問 web 頁面, 他將被要求填寫自己的名字。該名字會存儲在 cookie 中爷怀。
訪問者下一次訪問頁面時阻肩,他會看到一個歡迎的消息。
創(chuàng)建 3 個 JavaScript 函數(shù):
- 設(shè)置 cookie 值的函數(shù)
- 獲取 cookie 值的函數(shù)
- 檢測 cookie 值的函數(shù)
設(shè)置 cookie 值的函數(shù)
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
獲取 cookie 值的函數(shù)
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
檢測 cookie 值的函數(shù)
function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}