关于Cookie:
1、Cookie 是什么
Cookie 全称 HTTP Cookie,简称 Cookie
// 是浏览器存储数据的一种方式
// 因为存储在用户本地,而不是存储在服务器上,是本地存储
// 一般会自动随着浏览器每次请求发送到 服务器端
2、Cookie 有什么用
利用 Cookie 跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在每个网页的停留时间等
3、在浏览器中操作 Cookie
不要在 Cookie 中保存密码等敏感信息
Cookie 的基本用法:
1.写入 Cookie
// document.cookie = 'username=name';
// document.cookie = 'age=18';
不能一起设置,只能一个一个设置
2.读取 Cookie
console.log(document.cookie);
读取的是一个由名值对构成的字符串,每个名值对之间由“; ”(一个分号和一个空格)隔开
Cookie 的属性:
1.Cookie 的名称(Name)和值(Value)
// 最重要的两个属性,创建 Cookie 时必须填写,其它属性可以使用默认值
// Cookie 的名称或值如果包含非英文字母,则写入时需要使用 encodeURIComponent() 编码,读取时使用 decodeURIComponent() 解码
// document.cookie = 'username=name';
// document.cookie = `username=${encodeURIComponent('用户名')}`;
// document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent( '用户名' )}`;
// 一般名称使用英文字母,不要用中文,值可以用中文,但是要编码
2.失效(到期)时间
// 对于失效的 Cookie,会被浏览器清除
// 如果没有设置失效(到期)时间,这样的 Cookie 称为会话 Cookie
会话 Cookie: 它存在内存中,当会话结束,也就是浏览器关闭时,Cookie 消失
// document.cookie = 'username=name';
// 想长时间存在,设置 expires 或 max-age
// expires 值为 Date 类型
// document.cookie = `username=name; expires=${new Date( '2023-1-01 00:00:00' )}`;
// max-age值为数字,表示当前时间 + 多少秒后过期,单位是秒
// document.cookie = 'username=name; max-age=5';
// document.cookie = `username=name; max-age=${24 * 3600 }`;
// 如果 max-age 的值是 0 或负数,则 Cookie 会被删除
3.Domain 域
// Domain 限定了访问 Cookie 的范围(不同域名)
// 使用 JS 只能读写当前域或父域的 Cookie,无法读写其他域的 Cookie
// document.cookie = 'username=name; domain=www.xxxxx.com';
4.Path 路径
// Path 限定了访问 Cookie 的范围(同一个域名下)默认在 / 路径下
// 使用 JS 只能读写当前路径和上级路径的 Cookie,无法读写下级路径的 Cookie
// document.cookie = 'username=name; path=/home';内层可以访问外层作用域
// 当 Name、Domain、Path 这 3 个字段都相同的时候,才是同一个 Cookie
5.HttpOnly
// 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问
6.Secure 安全标志
// Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端
// Domain、Path、Secure 都要满足条件,还不能过期的 Cookie 才能随着请求发送到服务器端
Cookie 的封装:
// 写入 Cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
if (typeof maxAge === 'number') { cookieText += `; max-age=${maxAge}`; }
if (domain) { cookieText += `; domain=${domain}`; }
if (path) { cookieText += `; path=${path}`; }
if (secure) { cookieText += `; secure`; }
document.cookie = cookieText;
}
// 通过 name 获取 cookie 的值
const get = name => {
name = `${encodeURIComponent(name)}`;
const cookies = document.cookie.split('; ');//分割成数组然后遍历
for (const item of cookies) {
const [cookieName, cookieValue] = item.split('=');
if (cookieName === name) { return decodeURIComponent(cookieValue); }
}
return;
};
// 根据 name、domain 和 path 删除 Cookie
const remove = (name, { domain, path } = {}) => {
set(name, '', { domain, path, maxAge: -1 });
};
Cookie 的注意事项:
// 1.前后端都可以创建 Cookie
// 2.Cookie 有数量限制
// 每个域名下的 Cookie 数量有限
// 当超过单个域名限制之后,再设置 Cookie,浏览器就会清除以前设置的 Cookie
// 3.Cookie 有大小限制
// 每个 Cookie 的存储容量很小,最多只有 4KB 左右