用 JavaScript 操作 Cookie

Web 服务器和 HTTP 服务器是无状态的，因此当 Web 服务器将网页发送到浏览器时，连接会被断开，服务器会忘记与用户相关的所有内容。
那么浏览器和 Web 服务器是怎样记住用户信息的?cookie 被发明出来解决这个问题。
当用户访问网页时，他们的名字、唯一 ID 或其他任何信息都可以存储在浏览器的 cookie 中。当用户下次又回到网页时，cookie 将记住他们的名字或唯一 ID。
Cookie 只是存储在计算机浏览器中的小型文本文件。它们包含以下数据：
保存数据的 Name-value 对
日期到期时，该 cookie 失效
应将其发送到的服务器的域和路径
而cookie也有一些值得一提的限制：
每个cookie的最大为 4096 字节
每个域最多20个cookie(每个浏览器略有不同)
Cookie是其自己的域名专用的(网站无法读取其他域的 Cookie，只能是它自己的)
大小限制适用于整个cookie，而不仅仅是它的值
在浏览器中，cookie通过 DOM 被公开为 document.cookies。
下面我们将介绍如何用 JavaScript 在浏览器中设置、获取、更新和删除 Cookie 数据。
目录
Create Cookies
Read Cookies
Update Cookies
Delete Cookies
Create Cookies用 JavaScript 在浏览器中设置 cookie 非常简单!我将在下面向你展示。
设置 Cookie
以下是在浏览器中用 JavaScript 创建新 cookie 的执行代码：
document.cookie = “userId=nick123”
运行该代码后，打开浏览器，你应该能在开发者工具的 Application(Safari 或Chrome)或 Storage(Firefox)中找到该 cookie。
设置 cookie 的过期时间
你还可以向 Cookie 中添加过期时间(UTC)，告知浏览器应该在什么时候将其删除：
document.cookie = “userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC”
设置一个 Cookie 路径
你还可以告诉浏览器 cookie 所属的路径(默认值是当前页面的路径)：
document.cookie = “userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user”
设置 cookie 域
我们将介绍的最后一段数据是 cookie 所属的域(默认为当前域)：
document.cookie = “userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com”
Read Cookies通过 document.cookie 对象，用 JavaScript 读取 cookie 也非常简单：
读取单个页面所有的 Cookie
将单个页面的所有 cookie 作为字符串获取，每个 cookie 用分号分隔：
const cookies = document.cookie
读取具有特定名称的Cookie
要访问具有特定名称的 cookie，我们需要获取页面上所有的 cookie 并解析字符串，然后查找我们想要寻找的 cookie 名称的匹配项。
这是一个用正则表达式完成此任务的函数：
function getCookieValue(name) { let result = document.cookie.match(“(^|[^;]+)\\s*” + name + “\\s*=\\s*([^;]+)”) return result ? result.pop() : “”}
你这样使用该函数：
getCookieValue(“userId”) //returns nick123
这将返回与提供给函数的 name 参数对应的字符串值。
如果你还没有掌握正则表达式，还有另一个同样功能的函数：
function getCookieValue(name) { const nameString = name + “=” const value = document.cookie.split(“;”).filter(item => { return item.includes(nameString) }) if (value.length) { return value[0].substring(nameString.length, value[0].length) } else { return “” }}
用相同的方法使用该函数：
getCookieValue(“userId”) //returns nick123
Update Cookies你可以通过创建的方式用新值覆盖 cookie 来更改它的值。
你可以用此代码覆盖本文前面创建的 cookie “userId” ：
document.cookie = “userId=new_value”
当你再次运行 getCookieValue 函数时，将返回新值：
getCookieValue(“userId”) //returns new_value
Delete Cookies你可以给 cookie 设置一个空值，并将其过期日期设置为过去的任意时间来删除 cookie。
如果我们想要删除前面例子的 cookie “userId” ，请按以下步骤操作：
document.cookie = “userId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;”
很简单吧?

【责任编辑：赵宁宁 TEL：（010）68476606】