数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中将 Cookie 的名称-值对序列化为 Set Cookie 头字符串？
Cookie 允许我们将用户数据存储在 Web 浏览器中，以便快速响应。例如，当用户在任何 Web 应用程序中打开配置文件页面时，网页会从服务器接收数据。服务器还会发送包含数据的 Cookie 以存储在 Web 浏览器中。当用户再次访问配置文件页面时，它会从 Cookie 中获取数据，而不是从服务器获取数据，从而快速加载网页。
为了获取数据，浏览器首先查看 Cookie，如果在 Cookie 中找不到存储的数据，则会向服务器发出请求。本教程将教我们如何将 Cookie 的名称-值对序列化为 JavaScript 中的 Set Cookie 头字符串。
为什么我们需要将 Cookie 的名称-值对序列化？
我们可以在浏览器中将 Cookie 存储为键值对，并且 Cookie 不接受名称-值对中的一些特殊字符，如下所示。
\ " / [ ] ( ) < > ? = { } @ , ; :
因此，我们需要将上述字符替换为特殊字符的 UTF-8 编码。例如，我们需要将空格替换为“%20”转义序列。
使用 encodeURIComponent() 方法在 JavaScript 中序列化 Cookie
encodeURIComponent() 允许开发人员通过将特殊字符替换为一个、两个、三个或四个转义序列来对字符串进行编码。这里，转义序列表示字符的 UTF-8 编码。
语法
用户可以按照以下语法使用 encodeURIComponent() 方法对 URI 进行编码。
encodeURIComponent(key); encodeURIComponent(value);
在上述语法中，encodeURIComponent() 方法分别获取 Cookie 的键和值，并通过将特殊字符替换为转义序列来对它们进行编码。
示例
在下面的示例中，我们创建了 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>
示例
在下面的示例中，我们创建了箭头函数来序列化 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 的编码值。
856 次浏览
