下面我将详细讲解基于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常用操作以及属性介绍
基础教程推荐
猜你喜欢
- JavaScript中find()和 filter()方法的区别小结 2023-08-12
- JavaScript Cookie的读取和写入函数 2024-03-21
- JavaScript 浮动定位提示效果实现代码第2/2页 2024-01-24
- 深入理解CSS overflow:hidden——溢出,坍塌,清除浮动 2024-03-13
- css3制作彩色边线3d立体按钮的示例(css3按钮) 2024-01-22
- 深入解析CSS的Sass框架中混合宏的使用 2023-12-20
- 通过JavaScript实现动态圣诞树详解 2023-08-12
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- ajax实现文件异步上传并回显文件相关信息功能示例 2023-02-15
- ant design vue项目实战 2023-10-08