前端培训丁鹿学堂分享：前端cookie介绍和api封装

cookie介绍

cookie 是服务器端保存在浏览器的一小段文本信息，浏览器每次向服务器端发出请求，都会附带上这段信息（不是所有都带上）
常常用于保存登录、购物车等需要记录的信息，或者保存用户的偏好，比如网页的字体大小、背景色等等

cookie的重要属性：

Expires ：Expires属性指定一个具体的到期时间，到了这个指定的时间之后，浏览器就不再保留这个 cookie ,它的值是 UTC 格式，可以使用 Date.prototype.toUTCString() 格式进行转换
Max-Age 属性制定了从现在开始 cookie 存在的秒数，Max-Age 的优先级会比 Expires 的高

封装写入cookie工具函数

cookie的api比较难用，前端基本都不使用了，但是一些老项目还是用cookie去存东西，我们可以封装成函数，方便使用和维护

const setCookie = (key, value, expire) => {
  const d = new Date();
  d.setDate(d.getDate() + expire);
  document.cookie = `${key}=${value};expires=${d.toUTCString()}`;
};
1
2
3
4
5

封装读取cookie工具函数

JavaScript unescape() 函数可对通过 escape() 编码的字符串进行解码

const getCookie = (key) => {
  const cookieStr = unescape(document.cookie);
  const arr = cookieStr.split("; ");
  let cookieValue = "";
  for (let i = 0; i < arr.length; i++) {
    const temp = arr[i].split("=");
    if (temp[0] === key) {
      cookieValue = temp[1];
      break;
    }
  }
  return cookieValue;
};
1
2
3
4
5
6
7
8
9
10
11
12
13

封装删除cookie工具函数

其实浏览器没有给我们提供删除cookie的api，我们要实现删除，只要把它的过期时间设置为当前时间即可

const delCookie = (key) => {
  document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;
};
1
2
3