着互联网的发展，越来越多的网站开始使用 cookie 来保存用户的偏好设置、登录状态等信息。cookie 是一种存储在用户浏览器中的小文本文件，用于跟踪用户的行为和识别用户身份。在前端开发中，我们常常需要使用 cookie 来保存和获取一些数据。而 js-cookie 就是一个用于操作 cookie 的 JavaScript 库。

js-cookie 是一个简单易用的 cookie 操作库，它提供了一系列的方法来操作 cookie。下面我们就来详细了解一下 js-cookie。

安装 js-cookie

在使用 js-cookie 之前，我们需要先安装它。可以通过 npm 包管理器来安装 js-cookie：

npm install --save js-cookie

使用 js-cookie

安装完 js-cookie 后，我们就可以在 JavaScript 代码中使用它了。下面是一些常见的使用方法：

// 将数据保存到 cookie
Cookies.set('name', '张三');

// 通过 cookie 获取数据
var name = Cookies.get('name');

// 删除 cookie
Cookies.remove('name');

以上代码通过 js-cookie 的 set 方法将数据保存到 cookie 中，通过 get 方法获取 cookie 中的数据，通过 remove 方法删除 cookie。

js-cookie 的其他方法

除了上述方法外，js-cookie 还提供了一些其他的方法，如下所示：

1. Cookies.getJSON(key): 通过 cookie 获取 JSON 格式的数据。
2. Cookies.getAll(): 获取所有 cookie 的名称和值。
3. Cookies.enabled: 一个布尔值，表示当前浏览器是否支持 cookie。

总结

js-cookie 是一个简单易用的 cookie 操作库，它提供了一系列的方法来操作 cookie。使用 js-cookie 可以简化 cookie 操作的代码，并提高代码的可读性。在前端开发中，我们可以根据实际需求来使用 js-cookie 来保存和获取 cookie 中的数据。

eb 服务器和 HTTP 服务器是无状态的，因此当 Web 服务器将网页发送到浏览器时，连接会被断开，服务器会忘记与用户相关的所有内容。

那么浏览器和 Web 服务器是怎样记住用户信息的？cookie 被发明出来解决这个问题。

当用户访问网页时，他们的名字、唯一 ID 或其他任何信息都可以存储在浏览器的 cookie 中。当用户下次又回到网页时，cookie 将记住他们的名字或唯一 ID。

Cookie 只是存储在计算机浏览器中的小型文本文件。它们包含以下数据：

1. 保存数据的 Name-value 对
2. 日期到期时，该 cookie 失效
3. 应将其发送到的服务器的域和路径

而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,