如何在 JavaScript 中透過解析 http cookie 頭返回物件？

Cookie 是從網站傳送到使用者網路瀏覽器的小資料片段。它們用於儲存有關使用者的資訊，例如他們的偏好或登入狀態。

當用戶訪問網站時，他們的網路瀏覽器會向伺服器傳送請求。然後，伺服器將傳送響應，其中包含一組標頭。其中一個標頭是“Cookie” 標頭，其中包含與網站關聯的所有 Cookie 的列表。

解析 Cookie 標頭

為了解析 Cookie 標頭，我們需要首先將其拆分為各個名稱-值對。這可以使用String.split() 方法完成。

獲得名稱-值對陣列後，我們就可以迴圈遍歷它並建立一個物件。該物件將使用 Cookie 名稱作為鍵，使用 Cookie 值作為值。

假設我們有以下 Cookie 標頭 -

Set-Cookie: username=john; expires=Thu, 18 Dec 2019 12:00:00 GMT; path=/;

我們可以像這樣將其拆分為各個名稱-值對 -

var pairs = header.split(';');

這將給我們以下陣列 -

['username=john', 'expires=Thu, 18 Dec 2019 12:00:00 GMT', 'path=/']

然後，我們可以迴圈遍歷此陣列並建立物件 -

var cookies = {};
for (var i = 0; i < pairs.length; i++) {
   var nameValue = pairs[i].split('=');
   cookies[nameValue[0].trim()] = nameValue[1];
}

這將給我們以下物件 -

{ username: 'john', expires: 'Thu, 18 Dec 2019 12:00:00 GMT', path: '/' }

方法

步驟 1 - 我們首先建立一個名為parseCookieHeader() 的函式。此函式將 Cookie 標頭作為引數。
步驟 2 - 我們使用String.split() 方法將標頭拆分為各個名稱-值對。
步驟 3 - 我們建立一個空物件來儲存 Cookie。
步驟 4 - 我們使用 for 迴圈迴圈遍歷所有名稱-值對
步驟 5 - 我們使用String.split() 方法將每個名稱-值對拆分為陣列。
步驟 6 - 我們將陣列的第一個元素（Cookie 名稱）儲存為 cookies 物件中的鍵。我們將陣列的第二個元素（Cookie 值）儲存為 cookies 物件中的值。
步驟 7 - 我們返回 cookies 物件。
步驟 8 - 我們從文件中獲取 Cookie 標頭。
步驟 9 - 我們呼叫parseCookieHeader() 函式並傳入 Cookie 標頭。這將返回所有 Cookie 的物件。
步驟 10 - 我們在控制檯以及輸出視窗中顯示 Cookie。

示例

以下程式演示瞭如何解析 HTTP Cookie 標頭並返回所有 Cookie 名稱-值對的物件。這是完整的可執行程式碼 -


<!Doctype HTML>
<HTML>
<head>
   <title>Example</title>
</head>
<body>
   <h3> Parsing HTTP Cookie Header </h3>
   <p> Object of all cookie name-value pairs:</p>
   <div id="result"></div>
   <script>
      // Function to parse the cookie header
      function parseCookieHeader(header) {
      
         // Split the header into individual name-value pairs
         var pairs = header.split(';');
      
         // Create an object to store the cookies
         var cookies = {};

         // Loop through the name-value pairs and store them in the object
         for (var i = 0; i < pairs.length; i++) {
            var nameValue = pairs[i].split('=');
            cookies[nameValue[0].trim()] = nameValue[1];
         }
      
         // Return the object
         return cookies;
      }

      // Get the cookie header from the document
      var header = "username=john; expires=Thu, 18 Dec 2019 12:00:00 GMT; path=/;"

      // Parse the cookie header
      var cookies = parseCookieHeader(header);

      // Display the cookies
      console.log(cookies)
      document.getElementById("result").innerHTML = JSON.stringify(cookies)
   </script>
</body>
</html>

在本教程中，我們學習瞭如何在 JavaScript 中解析 Cookie 標頭並返回所有 Cookie 名稱-值對的物件。

Imran Alam

更新於： 2022 年 8 月 3 日

3K+ 瀏覽量

開啟你的職業生涯

透過完成課程獲得認證

開始學習

如何在 JavaScript 中透過解析 http cookie 頭返回物件？

解析 Cookie 標頭

方法

示例

開啟你的 職業生涯

開啟你的職業生涯