JavaScript 和 Cookie

什麼是 Cookie？

在 JavaScript 中，Cookie 是儲存在使用者 Web 瀏覽器中的資料片段。Cookie 以鍵值對的形式儲存在瀏覽器中。我們可以使用 document 物件的 cookie 屬性來操作 Cookie。我們可以使用 cookie 屬性設定或儲存鍵值對形式的 Cookie。我們可以使用 document 的 cookie 屬性讀取 Cookie，並使用解構提取所需資訊。

為什麼需要 Cookie？

Web 瀏覽器和伺服器使用 HTTP 協議進行通訊，而 HTTP 是一種無狀態協議。但是對於商業網站來說，需要在不同頁面之間維護會話資訊。

例如，您已登入到特定網站的特定網頁。該網站的其他網頁如何知道您已完成登入過程？在這種情況下，使用 Cookie。

在許多情況下，使用 Cookie 是記住和跟蹤偏好、購買、佣金和其他改進訪客體驗或網站統計資訊所需資訊的最高效方法。

有時，Cookie 也用於快取，以提高網站或應用程式的效能。

它是如何工作的？

您的伺服器以 Cookie 的形式向訪客的瀏覽器傳送一些資料。瀏覽器可能會接受 Cookie。如果接受，它將作為純文字記錄儲存在訪客的硬碟驅動器上。現在，當訪客訪問您網站上的另一個頁面時，瀏覽器會將相同的 Cookie 傳送到伺服器進行檢索。檢索後，您的伺服器就知道/記得之前儲存的內容。

Cookie 是 5 個可變長度欄位的純文字資料記錄：

Expires - Cookie 將過期的時間。如果為空，則 Cookie 將在訪客退出瀏覽器時過期。
Domain - 您網站的域名。
Path - 設定 Cookie 的目錄或網頁的路徑。如果您想從任何目錄或頁面檢索 Cookie，則可以為空。
Secure - 如果此欄位包含單詞“secure”，則 Cookie 只能使用安全伺服器檢索。如果此欄位為空，則不存在此類限制。
Name=Value - Cookie 以鍵值對的形式設定和檢索

Cookie 最初是為 CGI 程式設計設計的。Cookie 中包含的資料會在 Web 瀏覽器和 Web 伺服器之間自動傳輸，因此伺服器上的 CGI 指令碼可以讀取和寫入儲存在客戶端上的 Cookie 值。

設定/儲存 Cookie

JavaScript 可以使用 Document 物件的 cookie 屬性來操作 Cookie。JavaScript 可以讀取、建立、修改和刪除適用於當前網頁的 Cookie。

建立 Cookie 的最簡單方法是將字串值賦給 document.cookie 物件，如下所示。

document.cookie = "key1 = value1;key2 = value2;expires = date";

這裡的 expires 屬性是可選的。如果您使用有效的日期或時間提供此屬性，則 Cookie 將在給定的日期或時間過期，此後將無法訪問 Cookie 的值。

Cookie 字串包含用分號分隔的鍵值對。

注意 - Cookie 值可能不包含分號、逗號或空格。因此，您可能需要在將值儲存到 Cookie 中之前使用 JavaScript 的 escape() 函式對其進行編碼。如果您這樣做，則在讀取 Cookie 值時也必須使用相應的 unescape() 函式。

示例

嘗試以下操作。它在輸入 Cookie 中設定客戶姓名。

<html>
   <head>   
      <script type = "text/javascript">
         function WriteCookie() {
            if( document.myform.customer.value == "" ) {
               alert("Enter some value!");
               return;
            }
            cookievalue = escape(document.myform.customer.value) + ";";
            document.cookie = "name=" + cookievalue;
            document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
      </script>      
   </head>
   
   <body>      
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
      </form>   
   </body>
</html>

輸出

現在您的機器上有一個名為 name 的 Cookie。您可以使用多個用逗號分隔的 key=value 對來設定多個 Cookie。

讀取 Cookie

讀取 Cookie 與寫入 Cookie 一樣簡單，因為 `document.cookie` 物件的值就是 Cookie 本身。因此，您可以隨時使用此字串來訪問 Cookie。`document.cookie` 字串會保留一個用分號分隔的名稱=值對列表，其中名稱是 Cookie 的名稱，而值是其字串值。

您可以使用字串的split() 函式將字串分解為鍵和值，如下所示：

示例

嘗試以下示例以獲取所有 Cookie。

<html>
   <head>   
      <script type = "text/javascript">
         function ReadCookie() {
            var allcookies = document.cookie;
            document.write ("All Cookies : " + allcookies );
              
            // Get all the cookies pairs in an array
            cookiearray = allcookies.split(';');
               
            // Now take key value pair out of this array
            for(var i=0; i<cookiearray.length; i++) {
               name = cookiearray[i].split('=')[0];
               value = cookiearray[i].split('=')[1];
               document.write ("Key is : " + name + " and Value is : " + value);
            }
         }
      </script>      
   </head>
   
   <body>     
      <form name = "myform" action = "">
         <p> click the following button and see the result:</p>
         <input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

注意 - 這裡的length是Array類的一個方法，它返回陣列的長度。我們將在單獨的章節中討論陣列。在此之前，請嘗試理解它。

注意 - 您的計算機上可能已經設定了一些其他 Cookie。以上程式碼將顯示您計算機上設定的所有 Cookie。

設定 Cookie 的過期日期

您可以透過設定過期日期並在 Cookie 中儲存過期日期，來延長 Cookie 的生命週期，使其超出當前瀏覽器會話。這可以透過將‘expires’ 屬性設定為日期和時間來完成。

示例

嘗試以下示例。它演示瞭如何將 Cookie 的過期日期延長一個月。

<html>
   <head>   
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() + 1 );
            cookievalue = escape(document.myform.customer.value) + ";"
            
            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write ("Setting Cookies : " + "name=" + cookievalue );
         }
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

輸出

刪除 Cookie

有時您可能需要刪除 Cookie，以便後續嘗試讀取 Cookie 時返回空值。要做到這一點，您只需要將過期日期設定為過去的時間。

示例

嘗試以下示例。它演示瞭如何透過將 Cookie 的過期日期設定為當前日期前一個月來刪除 Cookie。

<html>
   <head>   
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() - 1 );
            cookievalue = escape(document.myform.customer.value) + ";"
               
            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue );
         }
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

輸出

更新 Cookie

要更新 Cookie 中特定的鍵值對，您可以將新的鍵值對賦給 `document.cookie` 屬性。在這裡，您需要確保您使用的是要更新其值的相同鍵。

語法

請按照以下語法更新 Cookie。

document.cookie="key1=value1";

在上面的語法中，我們正在更新“key” Cookie 的值。

示例

在下面的程式碼中，單擊“設定 Cookie”按鈕來設定 Cookie。它將為 `cartItem` 設定值 “watch”，為 `price` 設定值 10000。

之後，您可以單擊“獲取 Cookie”按鈕來檢視 Cookie。

接下來，您可以單擊“更新 Cookie”按鈕來更新 Cookie。它將把 `cartItem` 的值更改為 “bag”，並將 `price` 的值更改為 5000。

現在，再次單擊“獲取 Cookie”按鈕以獲取更新後的 Cookie 值。

<html>
<body>
<p id = "output"> </p>
<button onclick = "setCookies()"> Set Cookie </button> <br> <br>
<button onclick = "updateCookies()"> Update Cookie </button> <br> <br>
<button onclick = "getCookies()"> Get Cookies </button>
<script>
let output = document.getElementById("output");
function setCookies() {
  document.cookie = "cartItem=watch";
  document.cookie = "price=10000";
}
function updateCookies() {
  // Updating cookies
  document.cookie = "cartItem=bag"; 
  document.cookie = "price=5000";
}
function getCookies() {
  //Spliting the cookie string
  const allCookies = document.cookie.split("; "); 
  output.innerHTML = "The cookie data are : <br>";

  for (const cookie of allCookies) { 
    const [key, value] = cookie.split("="); 
    if (key == "cartItem" || key == "price") {
       output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
    }
  }
}
</script>
</body>
</html>

列印頁面