如何从 Cookie 创建和读取值？

在 Web 开发中，Cookie 是非常常见的概念。它是一小段文本信息，存储在访问者的计算机或设备上，以允许网站存储用户数据或跟踪用户活动。本文将介绍如何从 Cookie 中创建和读取值，帮助你更好地使用 Cookie。

创建 Cookie 值

我们可以使用 JavaScript 中的 document.cookie API 创建 Cookie 值。该属性返回所有 Cookie 的值，每个 Cookie 值由分号和空格分隔。下面是一个简单的示例，显示如何创建一个名为 username 的 Cookie 值：

document.cookie = "username=John Doe";

该语句会在用户计算机上创建一个名为 username 的 Cookie 值，其值为 John Doe。

除此之外，我们还可以在 Cookie 中设置更多参数，例如过期时间和域名。下面是一个具有更多参数的示例：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/; domain=.example.com; secure";

在上述示例中，我们设置了 Cookie 的过期时间、路径和域名。过期时间指定了 Cookie 的有效期，路径指定了可以访问 Cookie 的页面路径，域名指定了可以访问 Cookie 的域名。

读取 Cookie 值

我们可以使用 JavaScript 中的 document.cookie API 读取 Cookie 值。该属性返回所有 Cookie 的值，每个 Cookie 值由分号和空格分隔。下面是一个简单的示例，显示如何读取名为 username 的 Cookie 值：

var username = document.cookie.split('; ').find(row => row.startsWith('username=')).split('=')[1];

该语句使用 split 方法将所有 Cookie 值拆分成数组，并使用 find 方法查找名为 username 的 Cookie 值。最后，使用 split 方法将其值返回给 username 变量。

除此之外，我们还可以使用第三方 JavaScript 库来更轻松地读取和管理 Cookie，例如 js-cookie。该库为 Cookie 提供了更简单的创建和读取方法，例如下面的示例：

// 创建 Cookie
Cookies.set('username', 'John Doe', { expires: 7 });

// 读取 Cookie
var username = Cookies.get('username');

在上述示例中，我们使用 Cookies 对象创建和读取 Cookie 值，该对象在引入 js-cookie 库后提供。

总结

通过本文，我们了解了如何从 Cookie 中创建和读取值。无论你是使用原生 JavaScript 还是第三方库，Cookie 都是一种非常有用的工具，可以帮助我们存储和跟踪用户数据。希望本文对您有所帮助！