Cookie 是什么：
- Cookie 全称 HTTP Cookie，简称 Cookie
- 是一种浏览器存储数据的一种方式
- 因为存储在用户本地，而不是存储在服务器上，所以属于本地存储
- 一般会自动随着浏览器每次请求发送到服务器
Cookie 有什么用：
- 利用Cookie 跟踪统计用户访问该网站的习惯，比如什么时间，访问了哪些页面，在每个页面停留的时间等
写入 Cookie：
- 通过 document.cookie 等于 字符串的方式写入 Cookie，其中字符串内的形式为 Name=Value
- 多个Cookie 不能一起设置，只能一个一个设置
document.cookie = 'username=zhangsan';
document.cookie = 'age=18';
读取 Cookie：
- 读取 Cookie 使用的是 document.cookie；读取到的是由名值对构成的字符串，每个名值对之间由“; ”（一个分号一个空格）隔开
- 读取一次就会将所有的 Cookie 都读出来
console.log(document.cookie); // username=zhangsan; age=18
Cookie 的名称（Name）和值（Value）：
- 名称（Name）和值（Value）是 Cookie 最重要的两个属性，创建 Cookie 时必须填写，其它属性可以使用默认值
- Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码
- 一般名称使用英文字母，不要使用中文，值可以使用中文，但是要编码
// 编码
document.cookie = `username=${encodeURIComponent('张三')}`;
document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent('张三')}`;
// 解码
失效（到期）时间：
- 对于失效的 Cookie，会被浏览器清除
- 如果没有设置失效时间，这样的 Cookie 称为会话 Cookie（Session），它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失
- 想设置 Cookie 长时间存在，设置 expire 或 max-age
- expire 的值为 Date 类型
- max-age 的值为数字，表示当前时间 + 多少毫秒后过期，单位是秒；如果 max-age 的值是 0 或 负数，则 Cookie 会被删除
// expire
document.cookie = `username=zhangsan; expire=${new Date('2021-6-20 00:00:00')}`;
// max-age
document.cookie = 'username=zhangsan; max-age=10';
document.cookie = `username=zhangsan; max-age=${24*3600*1000 }`;
Domain 域：
- Domain 限定了访问 Cookie 的范围（不同域名）
- 使用 JS 只能读写当前域或父域的 Cookie，无法读写其它域的 Cookie
document.cookie = 'username=zhangsan; domain=127.0.0.1';
Path 路径：
- Path 限定了访问 Cookie 的范围（同一个域名下）
- 使用 JS 只能读写当前路径和上一级路径的 Cookie，无法读写下一级路径的 Cookie
document.cookie = 'username=zhangsan; path=/test';
HttpOnly：
- 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问
Secure 安全标志：
- Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送 Cookie 给服务端
// cookie.js
// 写入 Cookie
const set = (name, value, {maxAge, domain, path, secure} = {}) => {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent('value')}`;
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});
};
export { set, get, remove };
初识 LocalStorage：
- localStorage 也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
- 单个域名下的 localStorage 总大小有限制
LocalStorage 的基本用法：
- 添加 localStorage 使用 setItem(‘key’, ‘value’)
localStorage.setItem('username', 'zhangsan');
localStorage.setItem('age', 18);
localStorage.setItem('sex', 'male');
console.log(localStorage.getItem('username')); // zhangsan
console.log(localStorage.getItem('age')); // 18
console.log(localStorage.getItem('sex')); // male
// 获取不存在的会返回 null
console.log(localStorage.getItem('name')); // null
localStorage.removeItem('username');
// 删除不存在的 key，不会报错
localStorage.removeItem('name');
// 全部删除
localStorage.clear();
console.log(localStorage.length);
// 显示 localStorage 的内容
console.log(localStorage);
sessionStorage 的存储期限：
- 当会话结束（比如关闭浏览器）的时候，sessionStorage 中的数据会被清空
sessionStorage 的用法：
- sessionStorage 的用法和 localStorage 相似，同样有 setItem()、getItem()、removeItem()、clear() 和 length
// 添加 sessionStorage
sessionStorage.setItem('username', 'zhangsan');
sessionStorage.setItem('age', 18);
// 获取 sessionStorage
console.log(sessionStorage.getItem('username')); // zhangsan
console.log(sessionStorage.getItem('name')); // null
// 删除单个 sessionStorage
sessionStorage.removeItem('age');
// 清空 sessionStorage
sessionStorage.clear();
// 显示sessionStorage长度
console.log(sessionStorage.length);