JavaScript 如何把一个cookie名-值对序列化为Set Cookie头字符串

JavaScript 如何把一个cookie名-值对序列化为Set Cookie头字符串

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

为了获得数据,浏览器首先在cookie中寻找,如果它没有找到存储在cookie中的数据,它就会请求服务器。本教程将教我们如何在JavaScript中把一个cookie名-值对序列化为一个设定的cookie头字符串。

为什么我们需要序列化一个cookie名-值对

我们可以在浏览器中以键值对的形式存储cookie,而cookie不接受名-值对中的一些特殊字符,如下图所示。

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

所以,我们需要用特殊字符的UTF-8编码来替换上述字符。例如,我们需要用’%20’转义序列来替换空格。

使用encodeURIComponent()方法来序列化JavaScript中的cookies

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

语法

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

encodeURIComponent(key);
encodeURIComponent(value); 

在上述语法中,encodeURIComponent()方法分别接收cookie的键和值,并通过用转义序列替换特殊字符对其进行编码。

例子

在下面的例子中,我们已经创建了serializeCookies()函数,它将key和value作为一个参数。之后,我们使用了encodeURIComponent()方法对key和value分别进行编码。接下来,我们使用字符串字面意义来分离其键值对’=’字符。

在输出中,我们可以观察到,转义序列取代了特殊字符。

<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>

例子

在下面的例子中,我们已经创建了箭头函数来序列化cookie。我们写了一个单行函数来编码键值对并返回它们。此外,我们还在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的编码值。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 教程