JavaScript 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";
使用path參數,您可以告訴瀏覽器cookie屬於哪個路徑。默認情況下,cookie屬於當前頁面。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
使用JavaScript閱讀Cookie
使用JavaScript,cookie可以像這樣讀取:
var x = document.cookie;
document.cookie將返回一個字符串中的所有cookie,如:cookie1 = value; cookie2 =值; cookie3 =值;
使用JavaScript更改Cookie
使用JavaScript,您可以像創建cookie一樣更改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) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
示例說明:
上述函數的參數是cookie的名稱(cname),cookie的值(cvalue)以及cookie到期之前的天數(exdays)。該函數通過將cookiename,cookie值和expires字符串相加來設置cookie。
獲取Cookie的功能
然後,我們創建一個function返回指定cookie的值:
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
功能說明:
將cookiename作爲參數(cname)。使用要搜索的文本(cname +“=”)創建變量(名稱)。解碼cookie字符串,處理帶有特殊字符的cookie,例如'$'將分號上的document.cookie拆分爲名爲ca的數組(ca = decodingCookie.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() {
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);
}
}
}
所有代碼都在一起實現
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
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);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
上面的示例checkCookie()在頁面加載時運行該函數。
更詳情的Cookie技術文章