JavaScript中 cookies有什么用

JavaScript中 cookies有什么用，針對這個(gè)問(wèn)題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

一、什么是Cookies?

Cookie是數據，存儲在小文本文件中，在計算機上。

當Web向瀏覽器發(fā)送網(wǎng)頁(yè)時(shí)，連接被關(guān)閉，服務(wù)器會(huì )忘記用戶(hù)的一切。Cookie是為了解決“如何記住用戶(hù)信息”而發(fā)明的。

當用戶(hù)訪(fǎng)問(wèn)網(wǎng)頁(yè)時(shí)，他的名字可以存儲在cookie中。  下次用戶(hù)訪(fǎng)問(wèn)頁(yè)面時(shí)，cookie“記住”他的名字。

Cookie保存在名稱(chēng)值(name:value)對中。

username = John Doe

當瀏覽器從服務(wù)器請求一個(gè)網(wǎng)頁(yè)時(shí)，將屬于該頁(yè)的cookie添加到該請求中。這樣服務(wù)器就獲得了必要的數據來(lái)“記住”用戶(hù)的信息。

二、使用JavaScript創(chuàng )建一個(gè)Cookie

JavaScript可以創(chuàng )建、讀取、刪除cookie，用document.cookie屬性。

使用JavaScript，Cookie可以像這樣創(chuàng )建:

document.cookie = "username=John Doe";

可以添加一個(gè)到期日期(UTC時(shí)間)。默認情況下，在瀏覽器關(guān)閉時(shí)刪除cookie:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

使用路徑參數，您可以告訴瀏覽器cookie屬于什么路徑。默認情況下，cookie屬于當前頁(yè)。

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

三、使用JavaScript讀一個(gè)cookie

使用JavaScript，cookie可以這樣讀取。

var x = document.cookie;

document.cookie 將返回所有cookie在一個(gè)字符串。像: cookie1=value;  cookie2=value;cookie3=value;

四、使用JavaScript更改cookie

使用JavaScript, 你可以修改cookie，像使用創(chuàng )建它的方法一樣。

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

舊的cookie被覆蓋。

五、使用JavaScript刪除Cookie

刪除cookie非常簡(jiǎn)單。

刪除cookie時(shí)不必指定cookie值，只需將過(guò)期參數設置為已過(guò)期的日期。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

應該定義cookie路徑以確保刪除正確的cookie。如果不指定路徑，一些瀏覽器不會(huì )讓你刪除cookie。

六、JavaScript Cookie 實(shí)例

將創(chuàng )建一個(gè)cookie來(lái)存儲訪(fǎng)問(wèn)者的名稱(chēng)，訪(fǎng)客第一次到達網(wǎng)頁(yè)時(shí)，會(huì )要求他填寫(xiě)姓名。然后將該名稱(chēng)存儲在cookie中。

下次訪(fǎng)客到達同一頁(yè)時(shí)，他會(huì )收到一封歡迎消息。

1. 設置cookie值

首先，創(chuàng )建一個(gè)函數，將訪(fǎng)問(wèn)者的名字存儲在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=/"; }

函數解析:

上面函數的三個(gè)參數分別是：cookie的名稱(chēng)(cname)，cookie的值(cvalue)，還有cookie過(guò)期的天數。

函數根據參數創(chuàng )建cookie并設置過(guò)期參數。

2. 獲得cookie值

然后，創(chuàng )建一個(gè)函數返回指定cookie的值:

<script> getCookie("username");  function getCookie(cname) {   var allcookies = document.cookie;   cookieArr = allcookies.split(';');    for(var i = 0; i < cookieArr.length; i++) {      var cookiePair = cookieArr[i].split("=");      if(cname == cookiePair[0].trim()) {         document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]);      }   } } </script>

3. 函數檢查cookie值

最后，創(chuàng )建檢查cookie是否設置的函數。

如果cookie被設置，它將顯示一個(gè)問(wèn)候。

如果沒(méi)有設置Cookie，它會(huì )顯示一個(gè)提示框，詢(xún)問(wèn)用戶(hù)的名字，通過(guò)調用setCookie函數，并存儲用戶(hù)名cookie365天。

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);         }     } }

兩者合在一起效果展示。：