首先，需要明确，cookie是浏览器端的本地存储空间，用来存储一些数据，前后端都可操作
cookie的特点
- 按照域名存储，只能在当前域名下访问（Domain）
- 按照文件路径存储，只能在当前文件下访问（Path）
- cookie的存储按照字符串的形式存储，例如："key1=value1; key2=value2"
- 存储大小在4kb左右，大概存储50条
- 具有时效性，默认是会话级别的时效（关闭浏览器就没有了）；也可以设置cookie的时效（关闭浏览器以后依旧保存，例如：七天免登录，登录网站后下次默认是登录状态）
- 前后端都可以操作cookie
- 设置了cookie后，发送请求都会自动携带cookie
前端操作cookie
首先，前端操作cookie只有一个api，就是document.cookie来进行读写操作
document.cookie // 读
document.cookie = 'a=100;' // 写
document.cookie = 'a=200' // 同名为修改操作
document.cookie = 'a=300;path=/abc' // 设置cookie的path
document.cookie = 'a=400;expires=' + new Date() // 设置cookie的过期时间
注意：
- cookie一次只能设置一条，如果想设置多条，那么需要执行多次
document.cookie操作 - cookie可以在
'key=value;'的;后面设置一些额外的信息，例如：expires设置时效，path设置路径（如果不设置，默认是/根目录） - 在设置的时候，存储的数据只能是字符串，如果存入的不是字符串，那么会自动转换成字符串格式，所以一般用来存储一些简单数据类型
- 在设置cookie的时候，同名为修改操作，但是注意需要在同一路径下
- cookie没有办法删除，只能通过设置过期时间来删除
设置过期时间
首先，获取当前时间比世界标准时间多8小时，所以需要在设置过期时间时减上8小时
/**
* @param {STRING} key cookie的key
* @param {STRING} value cookie的value
* @param {NUMBER} expires cookie多少秒后过期
* @param {STRING} key cookie的路径
*/
const setCookie = (key, value, expires, path) => {
let str = key + '=' + value
if (expires) {
let time = new Date() // 获取当前时间
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires) // 设置时间为当前时间戳减去八小时加上过期时间
str += ';expires=' + time
}
if (path) {
str += ';path=' + path
}
document.cookie = str
}
setCookie('a', '10', 30, '/cookie') // 测试
如果想删除cookie，那么把时间设置为当前时间以前，比如getCookie('a', '100', -1)，这样就会删除这条cookie了
前端获取cookie
/**
* @param {STRING} key 选填：你要获取的某一个 cookie 的 key
* @returns {STRING | OBJECT} 填写参数是指定 key 的值，不填写参数是对象
*/
const getCookie = (key) => {
const tmp = document.cookie.split('; ') // 获取 cookie 并且切割为数组
let o = key ? '' : {} // 通过有参数或者没有参数来判断具体如何操作
tmp.forEach(item => {
const tmp1 = item.split('=')
if (key) {
if (tmp1[0] === key) o = tmp1[1]
} else {
o[tmp1[0]] = tmp1[1]
}
})
return o
}
// 测试
const res = getCookie('c')
console.log(res); // 100
const res1 = getCookie()
console.log(res1); // {c: '100', a: '200', b: '300'}
扩展：
/表示根目录
对象转为字符串[object Object]
