浏览器 Cookie 的使用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Cookie介绍

主要用于存储访问过的网站数据，把浏览器的信息存储到本地电脑中，实现客户端和服务器端的通讯。

Cookie特点

• 以文本形式保存(.txt)
• Cookie存储信息不安全（不能存放重要的信息）
• Cookie中有域（domain）和路径的概念,浏览器是一个比较安全的环境，所以不同的域之间不能直接访问（js的同源策略限制）

Cookie的常用属性

Name：cookie的名字(键)
Value：cookie存放的值
Expires：指cookie过期的时间（该时间为世界时间  UTC时间）也称为格林威治时间
Max-Age: 指cookie最大的存活有效期（单位：秒）
Domain: 指的是cookie当前的域
Path:指cookie当前的路径
Size: 指cookie存放的大小
Secure: 指cooke的安全属性

JavaScript操作Cookie

1. document.cookie 属性创建、读取、删除 cookie

document.cookie='name=Peak';
console.log(document.cookie);

2. 设置cookie失效时间

设置一个10分钟后失效的Cookie

function setCookie(name, value, expire){
    let expires = new Date(new Date().getTime() + loginRes.data.expire * 1000);
    document.cookie = `${name}=${value};expires=${expires}`;
}
setCookie('name', 'Peak', 10);

注意：过期时间是格林威治时间（UTC时间）

3. 提前清除cookie

把过期时间设置为小于当前时间即可

setCookie('name', 'Peak', -1);