基于Cookie常用操作以及属性介绍

下面我将详细讲解基于Cookie常用操作以及属性介绍的攻略。

1. 什么是Cookie

• 定义：Cookie 是一种存储在客户端的小文本文件，由浏览器自动管理，包含网站相关信息。
• 特点：
• 借助 HTTP 协议，在客户端和服务端之间传输；
• 客户端可通过 JavaScript 操作，实现与服务端的数据交互；
• Cookie 是一次性的（默认情况下）。它只存在一个时间段，在这个时间段中，客户端通过浏览器访问同一站点时，就会带上这个 Cookie。

2. Cookie 常用操作

2.1 写入 Cookie

可以通过 document.cookie 属性来写入 Cookie。

document.cookie = 'name=value; expires=date; path=path; domain=domain; secure';

• name=value : 设置 cookie 的名称和值
• expires=date : 设置 cookie 的过期时间，date 是一个 UTC 格式的字符串，表示 cookie 应该在何时被删除
• path=path : 指定 cookie 的作用路径。只有在该路径下的页面才能读取 cookie。
• domain=domain : 指定 cookie 可以被哪些域名访问。默认情况下，它只能够被设置它的那个域名访问。
• secure : 表示 cookie 的值只能通过 HTTPS 连接来传输。

示例：

document.cookie = 'username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/';

2.2 读取 Cookie

从 document.cookie 属性中读取 Cookie。

示例：

const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
  const [name, value] = cookie.split('=');
  console.log(name, value);
}

3. Cookie 属性介绍

3.1 Cookie 属性

• name=value : 设置/获取 cookie 的名称和值
• expires=date : 设置/获取 cookie 的过期时间，date 是一个 UTC 格式的字符串，表示 cookie 应该在何时被删除
• path=path : 设置/获取 cookie 的作用路径。只有在该路径下的页面才能读取 cookie。
• domain=domain : 设置/获取 cookie 可以被哪些域名访问。默认情况下，它只能够被设置它的那个域名访问。
• secure : 表示 cookie 的值只能通过 HTTPS 连接来传输。

3.2 Cookie 常用方法

• document.cookie : 设置/获取当前文档中的 cookie。
• Cookie() 构造函数：用来创建一个新的 Cookie 对象。
• toUTCString() 方法：将一个 UTC 时间转换为 GMT 格式的字符串。

示例：

// 创建一个新的 Cookie 对象
const cookie = new Cookie('username', 'John Doe', {
  path: '/',
  expires: new Date('2022-12-18T12:00:00Z'),
});

// 设置 document.cookie
document.cookie = cookie.toString();

// 读取 document.cookie
const cookies = document.cookie.split('; ');
for (const cookie of cookies) {
  const [name, value] = cookie.split('=');
  console.log(name, value);
}

以上就是基于 Cookie 常用操作以及属性介绍的完整攻略，希望能帮到你。