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

下面我将详细讲解基于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 常用操作以及属性介绍的完整攻略,希望能帮到你。

本文标题为:基于Cookie常用操作以及属性介绍

基础教程推荐