cookie 允许我们在网络浏览器中存储用户数据，以便快速响应。例如，当用户在任何 web 应用程序中打开个人资料页面时，网页都会从服务器接收数据。服务器还发送包含要存储在 web 浏览器中的数据的 cookie。当用户再次访问个人资料页面时，它会从 cookie 中获取数据，而不是从服务器中获取数据以快速加载网页。
要获取数据，浏览器首先查看 cookie，如果没有找到 cookie 中存储的数据，则会向服务器请求。本教程将教我们如何在 javascript 中将 cookie 名称-值对序列化为设置的 cookie 标头字符串。
为什么我们需要序列化 cookie 名称-值对？ 我们可以将cookie作为键值对存储在浏览器中，并且cookie不接受名称值对中的一些特殊字符，如下所示。
\ / [ ] ( ) < > ? = { } @ , ; :
所以，我们需要将上面的字符替换为特殊字符的utf-8编码。例如，我们需要用“%20”转义序列替换空格。
使用encodeuricomponent()方法在javascript中序列化cookieencodeuricomponent() 允许开发人员通过用一个、两个、三个或四个转义序列替换特殊字符来对字符串进行编码。这里，转义序列代表字符的 utf-8 编码。
语法用户可以按照下面的语法使用encodeuricomponent()方法对uri进行编码。
encodeuricomponent(key);encodeuricomponent(value);
在上面的语法中，encodeuricomponent()方法分别获取cookies的键和值，并通过用转义序列替换特殊字符来对它们进行编码。
示例在下面的示例中，我们创建了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>
示例在下面的示例中，我们创建了两个输入字段。一种是将key作为输入，另一种是将value作为输入。之后，当用户单击提交按钮时，它会调用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 的编码值。
以上就是如何在 javascript 中将 cookie 名称-值对序列化为 set cookie 标头字符串？的详细内容。