数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 Cookie 中存储 JavaScript 对象？
本教程将教我们如何将 JavaScript 对象存储到 **Cookie** 中。Cookie 是网站访问者信息存储在文本文件中的信息。浏览器用户 Cookie 的存储有一个特定的机制。当新访客访问网站时，服务器会生成文本并将其发送给用户。之后，当用户允许网页访问以检索 Cookie 时，服务器会将所有用户信息存储在文本文件中。
**Cookie** 存储用户的搜索历史记录或其他信息，以提供更好的体验。例如，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** - 如果找到键，则返回该键的值。否则，该键值对未存储在 Cookie 中。
示例
在以下示例中，我们使用 **document.cookie** 将 Cookie 存储在浏览器中。我们已实现上述算法以从 Cookie 中查找键值对。
我们使用 window.onload() 方法在网页加载时存储 Cookie。
<!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>
在以下输出中，用户可以看到我们已从 Cookie 中检索了用户 ID 和信息。
在 Cookie 中存储对象
现在，我们已经了解了 Cookie 在 JavaScript 中的工作原理以及如何在服务器上存储 Cookie。Cookie 仅以字符串格式存储信息。如果用户想要在 Cookie 中存储任何其他类型的数据，则需要使用 stringify() 方法将其转换为字符串。
在本节中，我们将对象转换为字符串并将其存储在 Cookie 中。此外，我们还将从 Cookie 中检索对象。
语法
请按照以下语法在 Cookie 中存储对象。
// store object to the cookies let object = { name: "tutorialsPoint", site: "tutorialsPoint.com", } document.cookie = 'object=' + JSON.stringify(object);
示例
在以下示例中，我们使用 JSON.stringify() 方法将对象转换为字符串后，将其存储在 Cookie 中。我们使用了上一节中使用的相同算法从 Cookie 中检索对象。
<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>
好吧，我们已经了解了 Cookie 在 JavaScript 中的工作原理。Cookie 将用户信息发送到服务器。因此，黑客可能会攻击并获取用户信息。此外，Cookie 在文本文件中存储大约 4kb 的数据。
如今，每个现代浏览器都支持会话存储，将数据存储在本地计算机中。网页可以在需要时从会话存储或本地存储中检索数据，而不是从 Cookie 中获取数据。因此，建议使用会话存储而不是 Cookie，因为它更安全，用户可以存储多达 10MB 的数据。
11K+ 次浏览
