如何在 JavaScript 中將 cookie 名稱-值對序列化為 Set Cookie 標頭字串？-js教程-PHP中文網

首頁

web前端

js教程

如何在 JavaScript 中將 cookie 名稱-值對序列化為 Set Cookie 標頭字串？

PHPz

Sep 21, 2023 pm 06:25 PM

如何在 JavaScript 中将 cookie 名称-值对序列化为 Set Cookie 标头字符串？

Cookie 允许我们在网络浏览器中存储用户数据，以便快速响应。例如，当用户在任何 Web 应用程序中打开个人资料页面时，网页都会从服务器接收数据。服务器还发送包含要存储在 Web 浏览器中的数据的 cookie。当用户再次访问个人资料页面时，它会从 cookie 中获取数据，而不是从服务器中获取数据以快速加载网页。

要获取数据，浏览器首先查看 cookie，如果没有找到 cookie 中存储的数据，则会向服务器请求。本教程将教我们如何在 JavaScript 中将 cookie 名称-值对序列化为设置的 cookie 标头字符串。

我们可以将cookie作为键值对存储在浏览器中，并且cookie不接受名称值对中的一些特殊字符，如下所示。

\ " / [ ] ( ) < > ? = { } @ , ; :

所以，我们需要将上面的字符替换为特殊字符的UTF-8编码。例如，我们需要用“%20”转义序列替换空格。

使用encodeURIComponent()方法在JavaScript中序列化cookie

encodeURIComponent() 允许开发人员通过用一个、两个、三个或四个转义序列替换特殊字符来对字符串进行编码。这里，转义序列代表字符的 UTF-8 编码。

语法

用户可以按照下面的语法使用encodeURIComponent()方法对URI进行编码。

encodeURIComponent(key);
encodeURIComponent(value);

在上面的语法中，encodeURIComponent()方法分别获取cookies的键和值，并通过用转义序列替换特殊字符来对它们进行编码。

示例

在下面的示例中，我们创建了serializeCookies()函数，该函数将键和值作为参数。之后，我们使用encodeURIComponent()方法分别对键和值进行编码。接下来，我们使用字符串文字来分隔其键值对‘=’字符。

在输出中，我们可以观察到转义序列替换了特殊字符。

<html>
<body>
   <h3 id="Using-the-i-encodeURIComponent-i-method-to-serialize-cookies-in-JavaScript">Using the <i> encodeURIComponent() </i> method to serialize cookies in JavaScript</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function serializeCookies(key, value) {
         let serializeKey = encodeURIComponent(key);
         let serializeValue = encodeURIComponent(value);
         let serializeCookie = serializeKey + "=" + serializeValue;
         return serializeCookie;
      }
      output.innerHTML += "The key is name, and the value is Shubham Vora. <br>";
      output.innerHTML += "After serializing the cookies key-value pair, result is " + serializeCookies("name", "Shubham Vora");
   </script>
</body>
</html>

示例

在下面的示例中，我们创建了箭头函数来序列化 cookie。我们编写了单行函数来对键值对进行编码并返回它们。此外，我们在serializeCookies()函数的键值参数中使用了一些更特殊的字符，用户可以在输出中观察到每个特殊字符都有不同的转义序列。

<html>
<body>
   <h3 id="Using-the-i-encodeURIComponent-i-method-to-serialize-cookies-with-arrow-functions-in-JavaScript">Using the <i> encodeURIComponent() </i> method to serialize cookies with arrow functions in JavaScript</h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      const serializeCookies = (key, value) =>
      `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
      output.innerHTML += "The key is key@#$12 and value is Val&^%12#$. <br>";
      output.innerHTML += "After serializing the cookies key-value pair, result is " + serializeCookies("key@#$12", "Val&^%12#$");
   </script>
</body>
</html>

示例

在下面的示例中，我们创建了两个输入字段。一种是将key作为输入，另一种是将value作为输入。之后，当用户单击提交按钮时，它会调用serializeCookies()函数，该函数访问输入值并使用encodeURIComponent()方法对它们进行编码。

<html>
<body>
   <h3 id="Using-the-i-encodeURIComponent-i-method-to-serialize-cookies-in-JavaScript">Using the <i> encodeURIComponent() </i> method to serialize cookies in JavaScript</h3>
   <label for = "key"> Enter Key </label>
   <input type = "text" id = "key">
   <br> <br>
   <label for = "Value"> Enter Value </label>
   <input type = "text" id = "Value">
   <br> <br>
   <div id = "output"> </div>
   <br>
   <button onclick = "serializeCookies()"> Submit </button>
   <script>
      let output = document.getElementById('output');
      function serializeCookies() {
         let key = document.getElementById('key').value;
         let value = document.getElementById('Value');
         output.innerHTML = "The encoded key-value pair is " + `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
      }
   </script>
</body>
</html>

在本教程中，我们学习了使用encodeURIComponent()方法序列化cookie的键值对。此外，我们还看到了序列化 cookie 的不同示例。在最后一个示例中，用户可以添加自定义输入，并观察 cookie 的编码值。

以上是如何在 JavaScript 中將 cookie 名稱-值對序列化為 Set Cookie 標頭字串？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。