如何将 JavaScript 对象存储在 cookie 中?
本教程将教我们如何将 JavaScript 对象存储到 cookies 中。Cookie 是存储在文本文件中的网站访问者信息。有一种特殊的机制来存储用户浏览器的 Cookie。当新访问者访问网站时，服务器会生成文本并将其发送给用户。之后，当用户允许访问网页以检索 Cookie 时，服务器会将所有用户信息存储在文本文件中。
Cookies 存储用户的搜索历史记录或其他信息，以获得更好的体验。例如，Google 存储用户的搜索历史记录，以便根据用户的兴趣在网页上投放广告。 YouTube 存储 cookie 以推荐符合用户兴趣的视频。
在这里，我们将学习存储和获取 cookie 到 Web 服务器的基本方法。
为特定网页设置 cookie
首先，我们将学习从浏览器设置 cookie和获取 cookie。我们将以字符串的形式存储基本信息。此外，我们设置 cookie 的到期时间。用户还可以将路径添加到 cookie 中，以了解 cookie 已设置到哪个位置。
用户可以按照以下语法存储 cookie 并从浏览器获取 cookie。
语法
// set cookies in the string format window.onload = () => { document.cookie = "info=tutorialsPoint; expires=Mon, 27 june 2022 12:00:00 UTC;"; } //get cookies Var cookie = document.cookie;
算法(获取特定 Cookie)
当我们将某些信息存储到 Cookie 值时，它会附加到以前的 Cookie 中，而不会覆盖旧值。因此，当我们使用 document.cookies 时，它会返回所有存储的 Cookie。我们需要从所有 cookie 的键值对中获取所需的 cookie。
以下是创建函数以从 cookie 中获取所需键值的算法。
步骤 1 - 使用 document.cookie 方法获取行 cookie 字符串格式。
步骤 2 - 用分号 (;) 分隔 cookie，它将返回键值对的数组。
步骤 3 - 逐个遍历键值对以找到所需的键。
步骤 4 - 在遍历键值对时，从键前面删除空格，并检查该键是否与我们所需的键匹配。
步骤 5 - 如果找到键，返回该键的值。否则，该键值对不会存储在 cookies 中。
示例
在下面的示例中，我们使用 document.cookie 将 cookies 存储在浏览器中。我们已实现上述算法以从 cookies 中查找键值对。
我们使用 window.onload() 方法在网页加载时存储 cookies。
<!DOCTYPE html> <html> <head> <title> Store JavaScript objects in cookies. </title> </head> <body> <h2> Set cookies in JavaScript. </h2> <h4> Getting info and user id stored in cookies from the browser. </h4> <div id="cookies"> </div> <script> let cookie = document.getElementById("cookies"); // function get all cookies function retriveCookie(name) { var name = name + '='; var cookies = decodeURIComponent(document.cookie).split(';'); for (var i = 0; i<cookies.length; i++) { var c = cookies[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { cookie.innerHTML += "The cookies is - " + c.substring(name.length, c.length) + ". <br/>"; } } } retriveCookie("info"); retriveCookie("uuid"); window.onload = () => { document.cookie = "info=tutorialsPoint; expires=Mon, 27 june 2022 12:00:00 UTC;"; } </script> </body> </html>
在下面的输出中，用户可以看到我们已经从 cookies 中检索到了用户 ID 和信息。
将对象存储在 Cookies 中
现在，我们已经了解了 cookies 在 JavaScript 中的工作原理以及如何将其存储在服务器上。cookie 仅以字符串格式存储信息。如果用户想要在 cookies 中存储任何其他类型的数据，他们需要使用 stringify() 方法将其转换为字符串。
在本节中，我们将对象转换为字符串并将其存储在 cookies 中。此外，我们将从 cookies 中检索对象。
语法
按照以下语法将对象存储在 cookies 中。
// store object to the cookies let object = { name: "tutorialsPoint", site: "tutorialsPoint.com", } document.cookie = 'object=' + JSON.stringify(object);
示例
在下面的示例中，我们使用 JSON.stringify() 方法将对象转换为字符串，然后将其存储到 cookies 中。我们使用了上一节中使用的相同算法从 cookies 中检索对象。
<html> <head> <title> Store JavaScript objects in cookies. </title> </head> <body> <h2> Set cookies in JavaScript. </h2> <h4> Set up and getting objects from the browser cookie. </h4> <div id="cookies"></div> <script> let cookie = document.getElementById("cookies"); // function get all cookies function retriveCookie(name) { var name = name + '='; var cookies = decodeURIComponent(document.cookie).split(';'); for (var i = 0; i<cookies.length; i++) { var c = cookies[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { cookie.innerHTML = "The object in the cookies is - " + c; } } } retriveCookie("object"); window.onload = () => { let object = { name: "tutorialsPoint", site: "tutorialsPoint.com", } document.cookie = 'object=' + JSON.stringify(object); } </script> </body> </html>
好了，我们已经了解了 JavaScript 中 cookie 的工作原理。cookie 将用户信息发送到服务器。因此，黑客也许可以攻击并获取用户信息。此外，cookie 在文本文件中存储了大约 4kb 的数据。
如今，每个现代浏览器都支持会话存储，将数据存储在本地计算机中。网页可以在需要时从会话存储或本地存储中检索数据，而不是从 cookie 中获取数据。因此，建议使用会话存储而不是 cookie，因为它更安全，并且用户最多可以存储 10MB 的数据。
