十七、cookie

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

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

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

一、cookie的时效

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

  • 时间时效：

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

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

  • session时效：

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

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

二、cookie的获取

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

JavaScript中设定 cookie

1 // 通过JavaScript设定和读取cookie都是通过document.cookie来进行
2 
3 // 获取cookie
4 变量 = document.cookie
5 
6 // 设定cookie
7 document.cookie = 数据

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

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

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

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

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

 1 let cookieStr = 'name=张三; age=18; sex=男; addr=北京';
 2 
 3 let arr1 = cookieStr.split('; '); // ["name=张三", "age=18", "sex=男", "addr=北京"]
 4 let arr2;
 5 let obj = {};
 6 
 7 arr1.forEach(v => {
 8   // 再把v转化为数组
 9   arr2 = v.split('=');
10   // 数组的0、1位分别作为对象的键名键值
11   obj[arr2[0]] = arr2[1];
12 })
13 
14 console.log(obj);
三、cookie的设定

  • cookie必须是键值对形式的

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

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

  • 设定时效性

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

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

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