溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript創(chuàng)建、更改和刪除Cookie的方法

發(fā)布時(shí)間:2021-09-09 10:56:01 來(lái)源:億速云 閱讀:156 作者:chen 欄目:web開(kāi)發(fā)

本篇內(nèi)容介紹了“JavaScript創(chuàng)建、更改和刪除Cookie的方法”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!

JavaScript Cookie

Cookie是計(jì)算機(jī)上存儲(chǔ)在小文本文件中的數(shù)據(jù)。當(dāng)Web服務(wù)器將網(wǎng)頁(yè)發(fā)送到瀏覽器時(shí),連接將關(guān)閉,服務(wù)器將忘記用戶的所有內(nèi)容。發(fā)明Cookie是為了解決“如何記住用戶信息”的問(wèn)題:
當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)時(shí),他/她的名字可以存儲(chǔ)在cookie中。
下次用戶訪問(wèn)該頁(yè)面時(shí),cookie會(huì)“記住”他/她的名字。
Cookie以鍵值對(duì)形式保存,如:

username = John Doe

當(dāng)瀏覽器從服務(wù)器請(qǐng)求網(wǎng)頁(yè)時(shí),屬于該頁(yè)面的cookie將添加到請(qǐng)求中。這樣,服務(wù)器獲取必要的數(shù)據(jù)以“記住”有關(guān)用戶的信息。
如果您的瀏覽器已關(guān)閉本地Cookie支持,則以下示例均無(wú)效。

使用JavaScript創(chuàng)建Cookie

JavaScript可以使用document.cookie屬性創(chuàng)建,讀取和刪除cookie。使用JavaScript,可以像這樣創(chuàng)建一個(gè)cookie:

document.cookie = "username=John Doe";

您還可以添加到期日期(以UTC時(shí)間為單位)。默認(rèn)情況下,在瀏覽器關(guān)閉時(shí)刪除cookie:

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

使用path參數(shù),您可以告訴瀏覽器cookie屬于哪個(gè)路徑。默認(rèn)情況下,cookie屬于當(dāng)前頁(yè)面。

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將返回一個(gè)字符串中的所有cookie,如:cookie1 = value; cookie2 =值; cookie3 =值;

使用JavaScript更改Cookie

使用JavaScript,您可以像創(chuàng)建cookie一樣更改cookie:

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

舊cookie被覆蓋。

使用JavaScript刪除Cookie

刪除cookie非常簡(jiǎn)單。刪除cookie時(shí),不必指定cookie值。只需將expires參數(shù)設(shè)置為傳遞日期:

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

您應(yīng)該定義cookie路徑以確保刪除正確的cookie。如果您未指定路徑,某些瀏覽器將不允許您刪除cookie。

Cookie字符串

document.cookie屬性看起來(lái)像普通的文本字符串。但事實(shí)并非如此。即使你將一個(gè)完整的cookie字符串寫(xiě)入document.cookie,當(dāng)你再次讀出它時(shí),你只能看到它的名稱 - 值對(duì)。如果您設(shè)置了新cookie,則不會(huì)覆蓋較舊的cookie。新的cookie被添加到document.cookie,所以如果你再次閱讀document.cookie,你會(huì)得到類似的東西:cookie1 = value; cookie2 = value;
如果要查找一個(gè)指定cookie的值,則必須編寫(xiě)一個(gè)JavaScript函數(shù)來(lái)搜索cookie字符串中的cookie值。

JavaScript Cookie示例

在下面的示例中,我們將創(chuàng)建一個(gè)存儲(chǔ)訪客姓名的cookie。訪問(wèn)者第一次到達(dá)網(wǎng)頁(yè)時(shí),將要求他/她填寫(xiě)他/她的姓名。然后將名稱存儲(chǔ)在cookie中。下次訪問(wèn)者到達(dá)同一頁(yè)面時(shí),他/她將收到歡迎信息。在這個(gè)例子中,我們將創(chuàng)建3個(gè)JavaScript函數(shù):

  1. 用于設(shè)置cookie值的函數(shù)

  2. 獲取cookie值的函數(shù)

  3. 用于檢查cookie值的函數(shù)

  4. 設(shè)置Cookie的功能

首先,我們創(chuàng)建一個(gè)函數(shù)將訪問(wèn)者的名稱存儲(chǔ)在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=/";
}

示例說(shuō)明:
上述函數(shù)的參數(shù)是cookie的名稱(cname),cookie的值(cvalue)以及cookie到期之前的天數(shù)(exdays)。該函數(shù)通過(guò)將cookiename,cookie值和expires字符串相加來(lái)設(shè)置cookie。
獲取Cookie的功能
然后,我們創(chuàng)建一個(gè)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 "";
}

功能說(shuō)明:
將cookiename作為參數(shù)(cname)。使用要搜索的文本(cname +“=”)創(chuàng)建變量(名稱)。解碼cookie字符串,處理帶有特殊字符的cookie,例如'$'將分號(hào)上的document.cookie拆分為名為ca的數(shù)組(ca = decodingCookie.split(';'))。循環(huán)通過(guò)ca數(shù)組(i = 0; i < ca.length; i ++),并讀出每個(gè)值c = ca [i])。如果找到cookie(c.indexOf(name)== 0),則返回cookie的值(c.substring(name.length,c.length))。如果找不到cookie,則返回“”。
檢查Cookie的功能
最后,我們創(chuàng)建一個(gè)函數(shù)來(lái)檢查是否設(shè)置了cookie。如果設(shè)置了cookie,它將顯示問(wèn)候語(yǔ)。如果未設(shè)置cookie,它將顯示一個(gè)提示框,詢問(wèn)用戶的名稱,并通過(guò)調(diào)用setCookie函數(shù)將用戶名cookie存儲(chǔ)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);
      }
   }
}

所有代碼都在一起實(shí)現(xiàn)

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()在頁(yè)面加載時(shí)運(yùn)行該函數(shù)。

“JavaScript創(chuàng)建、更改和刪除Cookie的方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI