服务端 （Koa）

存储：

1
2
3
ctx.cookies.set("isLogin", md5(username + pwd), {
  maxAge: 1000 * 60 * 60 * 24 * 7,
});

读取：

1
const cookieVal = ctx.cookies.get("isLogin");

客户端

1
2
3
4
5
6
7
// 存储
document.cookie = "myCookie=hello;Max-Age=3600";

// 读取
console.log(document.cookie);
// myCookie=hello; myCookie2=hello2
// 如果有多个 Cookie 它会用分号隔开，中间会有个空格

这样存储或者读取比较麻烦，可以自己封装一个方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const getCookie = (key) => {
  const cookieData = document.cookie;
  const arr = cookieData.split("; ");
  for (let i = 0; i < arr.length; i++) {
    const arr2 = arr[i].split("=");
    if (arr2[0] === key) {
      return arr2[1];
    }
  }
};

const setCookie = (key, value, options) => {
  let str = `${key}=${value};`;
  for (const items in options) {
    str += `${items}=${options[items]};`;
  }
  console.log(str);
  document.cookie = str;
};

退出登录，清空缓存

如果退出登录的话，参考如下：
在这里插入图片描述

动手做：Cookie 实现记住登录

思路：在访问 login 页面的时候判断是否存在 cookie ，如果存在 cookie 并且内容和数据库的内容一致，那么就去重定向页面。

这个需求就适合用 cookie 来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 主要代码：服务端
router.post("/checkUser", async (ctx) => {
  const { username, pwd } = ctx.request.body;
  const isRememberMe = ctx.request.body.memberMe;
  if (username === "Ruby" && pwd === "1") {
    if (isRememberMe) {
      ctx.cookies.set("isLogin", md5(username + pwd), {
        maxAge: 1000 * 60 * 60 * 24 * 7,
      });
    }
    ctx.redirect("/list");
  } else {
    ctx.redirect("/error");
  }
});
  • 浏览器也会在每次请求的时候主动组织所有域下的 cookie 到请求头 cookie 中，发送给服务器端，**cookie 会请求头部传递，不管你需不需要，他都会传递过去**
  • 浏览器会主动存储接收到的 set-cookie 头信息的值
  • 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值，（坑已猜）
  • 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
  • 同域下个数有限制，最好不要超过 50 个(不同浏览器有所不同)
  • 单个cookie内容大小有限制，最好不要超过 4000 字节(不同浏览器有所不同)
  • Cookie 中是不能中文的，如有需要，可以进行 base64 进行加密，这是我尝试存成汉字后报的错误
    在这里插入图片描述

LocalStorage & SessionStorage

API

存储：

1
localStorage.setItem("test", "测试本地保存");

在这里插入图片描述
读取：

1
2
3
localStorage.getItem("test");
// 读取并打印
console.log(localStorage.getItem("test"));

移除：

1
localStorage.removeItem("test");

清除所有：

1
localStorage.clear();

监控 storage 值得变化

1
2
3
window.addEventListener("storage", () => {
  // 逻辑
});

共同点

  • API 相同
  • 存储大小限制一样基本类似
  • 无个数限制

不同点

  • localStorage
    • 没有有效期，除非删除，否则一直存在
    • 同域下页面共享
    • 支持 storage 事件
  • sessionStorage
    • 浏览器关闭，自动销毁
    • 页面私有
    • 不支持 storage 事件 & SessoionStorage

三者的共同点

  • 同域（同源策略）限制：同源策略：请求与响应的 协议、域名、端口都相同 则时同源，否则为 跨源/跨域
  • 存储的内容都会转为字符串格式
  • 都有存储大小限制

跳的坑

这是因为是设置了http-only 为 true 的原因！！！ 幸亏回家学了点儿习。

我是用 koa 设置 cookie 的，他会默认为 true，所以需要声明一下