Cookie 允许我们在网络浏览器中存储用户数据,以便快速响应。例如,当用户在任何 Web 应用程序中打开个人资料页面时,网页都会从服务器接收数据。服务器还发送包含要存储在 Web 浏览器中的数据的 cookie。当用户再次访问个人资料页面时,它会从 cookie 中获取数据,而不是从服务器中获取数据以快速加载网页。
要获取数据,浏览器首先查看 cookie,如果没有找到 cookie 中存储的数据,则会向服务器请求。本教程将教我们如何在 JavaScript 中将 cookie 名称-值对序列化为设置的 cookie 标头字符串。
我们可以将cookie作为键值对存储在浏览器中,并且cookie不接受名称值对中的一些特殊字符,如下所示。
\ " / [ ] ( ) < > ? = { } @ , ; :
所以,我们需要将上面的字符替换为特殊字符的UTF-8编码。例如,我们需要用“%20”转义序列替换空格。
encodeURIComponent() 允许开发人员通过用一个、两个、三个或四个转义序列替换特殊字符来对字符串进行编码。这里,转义序列代表字符的 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 の名前と値のペアをシリアル化して Cookie ヘッダー文字列を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。