前端练习23 操作Cookie

知识点

1. 读取Cookie
2. Cookie形式
3. 设置Cookie
4. 删除Cookie

题目

完成cookieJar单例，它有三个方法：

• set(name, value, days)：设置cookie的值，days为多少天以后过期。
• get(name)：获取cookie的值。
• remove(name)：删除cookie的值。

实现

首先，设置cookie时是直接给Cookie赋值：

document.cookie = 'key=name; expires=Tue, 18 Dec 2018 06:45:28 GMT'

要注意的是：

1. 每次执行就相当于向document.cookie中添加了一条数据，如果key重复，则会覆盖旧的cookie
2. 各项设置之间用;连接
3. expires是一个绝对时间，所以如果要给定1天后过期需要使用时间戳计算new Date(Date.now() + time)
4. 也可以设置max-age，它是一个相对时间，时间是秒

读取cookie时，直接使用document.cookie读取，结果是一个字符串：

"name=123; ok=999; ok2=0"

要注意的是;后面是有一个空格的，需要在分割为数组的时候注意

删除cookie的方法是设置其expires为一个已过期的时间，或者max-age为0

const cookieJar = {
  set(name, value, days = 1) {
    const seconds = days * 24 * 60 * 60;
    document.cookie = `${name}=${value}; expires=${new Date(Date.now() + seconds * 1000)}; max-age=${seconds}`
  },
  get(name) {
    const {cookie} = document;
    if (!cookie) {
      return
    }
    const cookieObj = cookie.split('; ').reduce((total, current) => {
      const [ key, value ] = current.split('=');
      return Object.assign(total, { [key]: value} );
    }, {});
    return cookieObj[name]
  },
  remove(name) {
    document.cookie = `${name}=''; expires=-1; max-age=-1`
  }
}

参考

• 34 操作 Cookie@ScriptOJ
• HTTP cookies@MDN
• JavaScript Cookie@Runoob