浏览器 Cookie，或 HTTP Cookie，是由微小数据片段组成的文本文件。网站使用这些信息来跟踪用户’的浏览轨迹，从而为他们提供量身定制的功能并改善其浏览体验。Cookie 最多可以存储 4096 字节的数据。不过，根据浏览器的不同，我们每个域名只能添加有限数量的 Cookie。
对于任何互联网用户来说，基本了解 HTTP Cookie 都是必不可少的，无论您’只是为了好玩而浏览，还是以此谋生。本指南将 详细向您介绍 Cookie 及其各种类型。我们的重点是帮助您理解和使用 JavaScript Cookie.
让我们’开始吧！
前提条件
要学习本教程，您必须具备：
-
基本的 JavaScript 基础知识.
JavaScript Cookie 入门
使用 JavaScript Cookie 非常简单。它允许轻松创建、编辑和检索 Cookie。此外，我们可以使用 Document 对象’的 cookie 属性来操作和限制 Cookie 的属性，例如名称、值和长度等。
Cookie 的类型
首先，让我们来看看不同类型的 Cookie：
-
第一方 Cookie
这些 Cookie 是在用户每次访问网站时创建并存储的。它允许网站所有者深入了解用户’的数据，并为他们提供更好的浏览体验。
-
持久性 Cookie
对于这种 Cookie，发行者会指定一个过期日期。因此，它的使用时间要长得多。这意味着即使您关闭浏览器，Cookie 仍会保留在其中。此外，每次您访问创建该 Cookie 的网站时，数据都会返回给发行者。
-
会话 Cookie
这些 Cookie 只是临时的，在浏览器打开时会存储在浏览器的内存中。当您关闭浏览器时，Cookie 会从浏览器的历史记录中删除，从而降低了安全风险。您不需要指定过期日期。
-
第三方 Cookie
第三方 Cookie 是由您当前未访问的网站创建的。大多数情况下，这些 Cookie 有助于跟踪点击了广告的用户，并将其与推荐他们的域名关联起来。
创建 Cookie
我们可以使用两种方法来创建 Cookie：
-
发送 Set-Cookie，在 HTTP 响应头中。根据用于 Web 服务器的技术，您可以使用工具和库来管理 Cookie 标头。Cookie 可以包含诸如过期日期之类的信息，以及诸如安全指令和 HttpOnly 标志等安全特性。
-
HttpOnly： 它表示浏览器无法读取或修改 Cookie。
-
Secure： 这表示 Cookie 只能通过 HTTPS 发送。
-
使用 JavaScript document.cookie 属性，我们可以创建、读取和删除 Cookie。
步骤 1 — 创建 Cookie
接下来，我们将演示创建 JavaScript Cookie 的过程。Cookie 以键值对格式保存：
|
1 |
document.cookie = "UserName = CloudSigma"; |
在上述 Cookie 中， UserName 是 Cookie 的名称，而 CloudSigma 是存储在其中的值。
Cookie 具有过期日期。默认情况下，它会在关闭浏览器时自动删除。您还可以为 Cookie 添加过期日期：
|
1 2 3 |
document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC"; document.cookie = "UserName = CloudSigma"; |
默认情况下，Cookie 属于当前页面。但是，我们也可以借助 path 参数来指定 Cookie：
|
1 2 |
document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/"; |
-
Cookie Max-Age 与 Cookie Expire
根据您的需要，您可以使用这两种策略来设置 Cookie 的过期日期。两者的区别在于 expires 设置了删除 Cookie 的过期日期。相反， max-Age 设置 cookie 将被删除的时间（以秒为单位）。不幸的是， max-age 并非所有浏览器都支持。
使用 设置 cookie 的示例expires 和 max-age:
Expires:
|
1 2 3 |
var d = new Date(); d.setTime(d.getTime() + 5*60*1000); // 以毫秒为单位 document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';'; |
Max-age :
|
1 |
document.cookie = 'foo=bar;path=/;max-age='+5*60+';'; |
Step 2 — Reading a Cookie
该 document.cookie 属性返回一个字符串。如果有两个或多个 cookie，我们使用分号（ ;）和空格来分隔它们。
我们使用 split() 方法从 cookie 列表中提取单个 cookie。此方法将列表分解为单独的名称和值对。完成后，您就可以搜索要读取的目标 cookie：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
function setCookie(name, count, validityCheck) { var cookie = name + "=" + encodeURIComponent(value); if(typeof validityCheck === "number") { cookie += "; max-age=" + (validityCheck*24*60*60); document.cookie = cookie; } } function getCookie(name) { var cookieArr = document.cookie.split(";"); for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if(name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } function checkCookie() { var UserName = getCookie("UserName"); if(UserName != "") { alert("欢迎再次光临，" + UserName); } else { firstName = prompt("请输入您的用户名："); if(UserName != "" && UserName != null) { setCookie("UserName", UserName, 30); } } } |
让我们来了解一下我们在代码中创建的函数：
| 函数名称 | 描述 |
| setCookie() | 创建 cookie |
| getCookie() | 读取 cookie 的值 |
| checkCookie() | 验证 UserName 是否已设置。 |
在下一步中，我们将学习如何更新 cookie。
第 3 步 — 更新 Cookie
我们可以为 cookie 属性设置新值。在我们的示例中，让我们将用户的订阅从月度计划更新为季度计划。
让我们将 max-age 属性（对于 UserName cookie）从 30 天更新为 180 天：
|
1 2 |
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60; |
第 4 步 — 删除 Cookie
使用相同的名称重新设置 cookie 将删除您要清除的 cookie。我们可以通过将 max-age 属性设置为 0:
|
1 |
document.cookie = "UserName=; max-age=0"; |
此外，如果 Cookie 具有指定的路径，请通过指定该路径来删除它：
|
1 |
document.cookie = "Username = ExcellentDesign; Path = /"; |
结论
Cookie 对于网站的正常运行和发挥功能是必不可少的。在这篇入门教程中，我们详细讨论了 Cookie 及其不同的类型。此外，我们还通过一个示例学习了如何使用 Cookie。既然您已经可以熟练使用 JavaScript Cookie，那就开始创建自定义 Cookie，以学习和探索关于该主题的更多内容吧。
此外，您还可以从我们的 博客:
祝您编程愉快！
评论
暂无评论。发表第一条评论吧。