cookie 的使用和回顾。

cookie 的使用和回顾。

cookie 的使用日常工作中很少了，记录下前端经常使用的 Cookie 三部曲使用介绍及代码

Cookie 设置

通过 JS 的 document.cookie 设置与当前页面相关的 cookie 信息，格式为键值对。

Cookie 读取

通过 JS 的 documen.cookie 获取到当前网页所有相关的 cookie 的 name 和 value，以正则匹配到要获取的 cookie value

Cookie 删除

前端不存在直接删除 cookie 的方法，只能通过设置 cookie 的 Expires 属性为一个已经过去的时间或者设置 Max-Age 属性设置为 0，从而使 cookie 失效，然后被浏览器给清除掉。

let Cookie = {
  // 读取
  get(name) {
    let arr,
      reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if ((arr = document.cookie.match(reg))) return decodeURI(arr[2]);
    else return null;
  },
  // 设置
  set(name, value, expires = 30) {
    let Days = expires;
    let exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie =
      name + "=" + encodeURI(value) + ";expires=" + exp?.toString();
  },
  // 删除
  del(name) {
    let exp = new Date();
    exp.setTime(exp.getTime() - 1);
    let cval = this.get(name);
    if (cval !== null) document.cookie = name + "=;path=/;max-age=0";
  },
};

使用如下图：

控制台查看

本地 html 文件直接打开调试 cookie 问题

• 直接调试上述功能发现的 bug，一开始浑然不知 cookie 只能存储服务器的页面上的数据，使用 vscode 作为开发工具，它不像 webstorm 一样打开页面就是 localhost:8080 之类的地址，而是文件路径的地址，类似于这样：file:///E:/html/cookie.html 的。
• 如果你使用 vscode 开发调试 cookie 首先要解决的就是启动本地服务器，那么下面就是详细的步骤：

npm install http-server -g

下载完后，在项目目录打开终端输入

http-server .\html\

启动后会给你个本地服务的地址，进入http://127.0.0.1:8080/cookie.html页面可以进行调试，就可以看到cookie的读写记录。

cookie 简介

Cookie 是服务器发送到用户浏览器并保存在本地的一组键值对格式的数据，不同浏览器对 Cookie 的数量和大小限制不同，但一般来说，单域名下设置的 cookie 不能超过 30 个，单条 cookie 的大小不能超过 4kb。如果 Cookie 超出浏览器限制，则会被浏览器忽略，不被保存。而且 Cookie 可以设置过期时间，到达过期时间后，浏览器就会把 Cookie 清除掉。

cookie 两种方式

• 服务端通过在 HTTP 响应头中的 Set-Cookie 字段设置。
• 前端通过 JS 的 document.cookie 设置。
  在浏览器在拥有 Cookie 之后，每次向服务器发送请求时，都会自动携带对应地址的 Cookie。但是用户可以手动操作浏览器接受、拒绝和删除 Cookie，以及是否向服务器发送 Cookie

cookie 两种类型

• 会话期 Cookie，会话期 Cookie 不设置具体失效时间，会话结束之后，会被删除掉。被存储在内存中，当会话关闭时，该 Cookie 永久丢失。
• 持久性 Cookie。持久性 Cookie 会设置好具体的有效期，被存储在磁盘中，浏览器关闭不会影响该 Cookie，只有当有效期结束时，才会从磁盘中将该 Cookie 删除。在有效期内，会一直复用该 Cookie。

cookie 常用属性

field	deacription
Name	Cookie 的标识符，用于在客户端和服务器之间传递数据
Value	与 Cookie 关联的值，可以是任何字符串
Domain	指定可以访问 Cookie 的域名。如果未设置，则默认为创建 Cookie 的网页的域名
Path	指定可以访问 Cookie 的路径。如果未设置，则默认为创建 Cookie 的网页所在的路径
Expires	指定 Cookie 的过期时间，也就是 Cookie 将被自动删除的时间点。如果未设置，则表示该 Cookie 在用户关闭浏览器时被删除
Secure	如果设置了该标志，表示该 Cookie 只能通过加密协议（如 HTTPS）传输
HttpOnly	如果设置了该标志，那么该 Cookie 只能通过 HTTP 协议传输，而不能通过 JavaScript 等脚本语言来访问。这有助于防止跨站点脚本攻击（XSS）

参考文档

• cookie
• http-cookie
• document-cookie

有疑问的同学可以私信我、对帮助到同学欢迎大家收藏评论。