如何在JavaScript中将cookie的键值对序列化为Set Cookie头字符串

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

为了获取数据，浏览器首先查找Cookie中是否存储了数据，如果找不到，则请求服务器。本教程将教会我们如何在JavaScript中将cookie的键值对序列化为set cookie头字符串。

为什么我们需要将cookie的键值对序列化

我们可以将cookie作为浏览器中的键值对进行存储，但cookie在键值对中不接受某些特殊字符，如下所示。

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

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

使用JavaScript中的encodeURIComponent()方法对cookie进行序列化

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

语法

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

encodeURIComponent(key);
encodeURIComponent(value);

在上述语法中，encodeURIComponent() 方法单独使用键和值，并通过用转义序列替换特殊字符来对它们进行编码。

示例

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

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

<html>
<body>
   <h3>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>

示例

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

<html>
<body>
   <h3>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>

示例

在下面的示例中，我们创建了两个输入字段。一个用于输入键，另一个用于输入值。然后，当用户点击提交按钮时，它调用serializeCookies()函数，该函数访问输入值并使用encodeURIComponent()方法进行编码。

<html>
<body>
   <h3>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的编码值。