ES6 - Cookie

Web 瀏覽器和伺服器使用 HTTP 協議進行通訊。HTTP 是無狀態協議，即它不跨客戶端發出的多個請求維護客戶端的資料。客戶端和伺服器之間完整的請求-響應週期定義為一個會話。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 值。

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

儲存 Cookie

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

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

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

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

示例

<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" onclick = "WriteCookie();"/> 
      </form> 
   </body> 
</html>

在成功執行上述程式碼後，將顯示以下輸出。

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

讀取 Cookie

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

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

示例

<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 的過期日期延長 1 個月。

示例

<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 = "formname" action = ""> 
         Enter Cookie 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 = "formname" action = ""> 
         Enter Cookie Name: <input type = "text" name = "customer"/> 
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/> 
      </form> 
   </body> 
</html>

在成功執行上述程式碼後，將顯示以下輸出。

列印頁面