十七、cookie

cookie是浏览器用来存储前端数据的一种存储机制

• 本质上是在浏览器内创建一个文档文件，在这个文件中写入数据、存储数据、读取数据

• 存储在 cookie 文件中的数据，一般是作为整个项目的公共数据使用

一、cookie的时效

• cookie中存储的数据，都是带有时效性的，如果是超过了时效性，cookie会自动删除这个数据

• 时间时效：

  • 只要当前时间超过时效时间，cookie会自动删除这个数据

  • 设定和计算时间都是按照标准时间计算，中国 : 当前时间 - 8小时

• session时效：

  • 会话时效，请求连接的时效性

  • 当请求连接中断时，cookie会自动删除这个数据

二、cookie的获取

cookie 是浏览器的功能，所有的计算机语言，都可以操作cookie

JavaScript中设定 cookie

// 通过JavaScript设定和读取cookie都是通过document.cookie来进行

// 获取cookie
变量 = document.cookie

// 设定cookie
document.cookie = 数据

• 通过 document.cookie 获取到的是字符串数据

• 键值对，分号，空格，键值对，分号，空格，键值对形式（name=张三; age=18; sex=男; addr=北京）

  • 通过分号将字符串先转化为数组

  • 将上一步索引对应的字符串数据，再转化为数组

  • 将 0 对应的内容作为对象的键名，将 1 对应的内容作为对象的数据

let cookieStr = 'name=张三; age=18; sex=男; addr=北京';

let arr1 = cookieStr.split('; '); // ["name=张三", "age=18", "sex=男", "addr=北京"]
let arr2;
let obj = {};

arr1.forEach(v => {
  // 再把v转化为数组
  arr2 = v.split('=');
  // 数组的0、1位分别作为对象的键名键值
  obj[arr2[0]] = arr2[1];
})

console.log(obj);

三、cookie的设定

• cookie必须是键值对形式的

  • 键名=键值，而且必须是字符串格式，document.cookie = 'name=张三';

  • cookie设定键值对，最好是一个一个来，因为要设定时效性

• 设定时效性

  • 通过 expires 来设定时效性，数值必须是 一个时间对象

    • 时间对象的声明必须要通过 new Date() 来完成，操作 时间对象中存储的时间 - 8小时时差 + 时效时间

document.cookie = 'name=张三;expires=时间对象';