如何使用 JavaScript 在文件中顯示 Cookie 的名稱/值對？

我們使用document物件的cookie屬性來使用JavaScript在文件中顯示Cookie的名稱/值對。document 物件是DOM的一部分，對應於瀏覽器已載入的當前網頁。它包含有關瀏覽器和網頁狀態的所有資訊。

當建立連線時，伺服器會處理請求，並在連線關閉後立即忘記使用者的所有資訊。這對使用者體驗造成了很大的問題。Cookie 透過為每個網站的使用者儲存少量但重要的詳細資訊來解決此問題。這樣，每當使用者再次訪問該網站時，請求也會附帶 Cookie，以便個性化使用者的體驗。

Cookie 是儲存重要資訊的小型文字檔案 (4 KB)，例如使用者名稱、電子郵件、會話 ID 和其他有助於為特定使用者定製網頁的首選項。

'dark_mode=true'

像這樣的瑣碎的事情，是使用者的偏好，因此可以方便地儲存在相應的 Cookie 檔案中。

使用 document.cookie 屬性

document.cookie 屬性返回一個由 (;) 分隔的名稱/值對列表。它儲存與當前網頁相關的 Cookie 資訊。

語法

var cookies = document.cookie;

以上程式碼返回名稱/值對列表，並將其儲存在 cookies 變數中。

讓我們來看一個例子，以便更好地理解。

示例 1

在下面的程式碼片段中，我們提取主機名並在 HTML 主體中記錄它。

<!DOCTYPE html>
<html>
<body>
   <div id = "result"></div>
   <script>
      var val = document.cookie;
      document.getElementById("result").innerHTML = "Name/ Value pair of Cookies: " + val;
   </script>
</body>
</html>

返回的列表可以根據 (;) 字元進行分割，並可以作為列表進行迭代。

var cookielist = document.cookie.split(';')

這返回一個name=value字串列表，並將其儲存在 cookielist 變數中。

讓我們來看一個例子，以便更好地理解。

示例 2

在下面的程式碼片段中，我們分割 document.cookie 返回的字串並遍歷它以訪問每個 Cookie。

<!DOCTYPE html>
<html>
<body>
   <div id = "result"></div>
   <script>
      var val = document.cookie;
      var cookielist = val.split(';')
      var text = ""
      for(var i = 0 ; i < cookielist.length ; i++){
         text += cookielist[i] + "<br>"
      }
      result.innerHTML = "Name/ Value pair of Cookies: <br>" + text ;
   </script>
</body>
</html>

我們還可以使用 JavaScript 建立自己的 Cookie。

document.cookie = "name=value"

這將建立一個具有名稱-值對的新 Cookie，並將其儲存在 document.cookie 屬性中。

讓我們來看一個例子，以便更好地理解。

示例 3

在下面的程式碼片段中，我們提取使用者輸入並在 document 物件中建立一個相應的 Cookie。

<!DOCTYPE html>
<html>
<body>
   Add your own cookies ! <br>
   Enter a Key-value pair :
   <input id = "cookie" type = "text">{name=value}
   <br>
   <button id = "button" onclick = "create()">
      Create !
   </button>
   <br>
   <p id = "alert"> </p>
   Click below to show all cookies !
   <button id = "show" onclick = "show()">
      show cookies !
   </button>
   <div id = "result"></div>
   <script>
      var result = document.getElementById("result");
      function create(){
         var cookieObj = document.getElementById("cookie");
         var value = cookieObj.value
         document.cookie = value ;
         document.getElementById("alert").innerHTML = "cookie created !";
      }
      function show(){
         var val = document.cookie;
         result.innerHTML = "Name/ Value pair of Cookies: " + val;
      }
   </script>
</body>
</html>

“建立！”按鈕觸發create() JavaScript 函式，然後建立一個新的 Cookie。然後可以使用“顯示”按鈕檢視新新增到網頁的 Cookie。

結論

Cookie 是一種創新的技巧，可以透過儲存有關使用者的小部分詳細資訊來增強使用者體驗。但是，它們也用於許多惡意攻擊，因此應謹慎處理。

更新於：2022年9月21日

736 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告