如何使用 JavaScript 讀取 Cookie?


在這篇文章中,我們將學習如何在 javascript 中讀取 cookie,以及如何使用它來實現某些功能,例如使用者跟蹤、使用者偏好、個性化體驗等。

Cookie 是儲存在使用者網路瀏覽器中的少量資料。在 javascript 中,我們可以使用文件的 cookie 屬性讀取 cookie,並使用解構提取所需的資訊。

讓我們看一些例子來更好地理解這個概念 -

示例 1 - 讀取所有 Cookie

在這個例子中,我們將 -

  • 透過訪問 document.cookie 屬性讀取所有 cookie 並將其記錄到控制檯。

  • 這向我們展示瞭如何獲取包含所有 cookie 的字串。

檔名 - index.html

<html>
<head>
   <title>How to read a cookies</title>
   <script>
      document.cookie = "session=123456789";

      function readAllCookies() {
         let cookies = document.cookie;
         console.log(cookies);
      }

      readAllCookies();
   </script>
</head>
<body>
   <h1>Read All Cookies</h1>
</body>
</html>

輸出

結果將類似於下圖。

示例 2 - 讀取特定 Cookie

在這個例子中,我們將 -

  • 定義一個 getCookie 函式,該函式為我們提供特定 cookie 的值。

  • 我們將 document.cookie 字串拆分為單個 cookie 的陣列,迭代它們,並檢查匹配的 cookie 名稱。

  • 如果找到 cookie,我們將返回解碼後的值。

  • 然後我們將 cookie 記錄到控制檯。

檔名 - index.html

<html>
<head>
   <title>How to read a cookie using JavaScript?</title>
   <script>
      document.cookie = "username=John Doe";
      document.cookie = "profession=Software Engineer";

      function getCookie(cookieName) {
         let cookies = document.cookie;
         let cookieArray = cookies.split("; ");
      
         for (let i = 0; i < cookieArray.length; i++) {
            let cookie = cookieArray[i];
            let [name, value] = cookie.split("=");
           
            if (name === cookieName) {
               return decodeURIComponent(value);
            }
         }
         
         return null;
      }

      let username = getCookie("username");
      console.log(username);
   </script>
</head>
<body>
   <h1>Read Specific Cookie</h1>
</body>
</html>

輸出

結果將類似於下圖。

結論

讀取 cookie 使我們能夠訪問瀏覽器儲存的使用者特定資料,例如偏好設定、會話 ID 或登入令牌。然後,這些值可以應用於各種線上應用程式,例如自定義使用者介面、新增使用者特定功能或監控網站活動。我們學習瞭如何使用不同的方法在 javascript 中讀取 cookie,並查看了一些解釋相同的示例。

更新於: 2023年8月16日

4K+ 閱讀量

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告