现在是前后端分离时代，接口登录凭证通常使用 cookie，session，web storage 来实现，三种方法区别可以阅读cookie、session 和 localStorage、以及 sessionStorage 之间的区别，这三种方式都可以用来实现登录凭证的存储，下面针对每种方式来逐一说明

以下的方式前提都是服务器设置了跨域响应头  Access-Control-Allow-Origin

cookie-session 机制

传统的方式使用的是 cookie 结合 session 来实现，用户登录服务端，服务器会生成一个唯一的 sessionId 来识别该用户，通过设置成 cookie 的值传递给客户端，客户端后续的请求通过 cookie 把 sessionId 回传服务器，就可以识别该用户对应的 session 对象。

cookie-session 机制的缺点

  • 如果浏览器不支持 cookie（如大部分手机中的浏览器）或者把 cookie 禁用了，cookie 功能就会失效。
  • cookie 和 session 的存储只有 4k，大小受到了限制。
  • 用户关闭浏览器不会清除 Cookie 存储的数据

cookie 需要注意事项

  • 要开启 cookie 传输，前端 ajax 请求需要设置  withCredentials: true  请求头，指定这个请求应该发送凭据
  • 防止 csrf 攻击，需要设置 HttpOnly: true  和 SameSite

web Storage 机制

web Storage 的目的是为了克服由 cookie 带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。web Storage 的两个主要目标是：

  • 提供一种在 cookie 之外存储会话数据的途径。
  • 提供一种存储大量可以跨会话存在的数据的机制。

web Storage 又分为两种： sessionStorage 和 localStorage ，即这两个是 Storage 的一个实例。从字面意思就可以很清楚的看出来，sessionStorage 将数据保存在 session 中，浏览器关闭也就没了；而 localStorage 则一直将数据保存在客户端本地。

为了安全起见，一般使用 sessionStorage 来存储，这样避免用户关闭浏览器导致登录凭证滞留而造成泄露

sessionStorage 多 tab 支持

sessionStorage 在同一个 tab 的情况下，刷新页面或者重新加载不会清除数据，但是本身却无法在多个 tab 页面共享数据，在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，意思就是打开一个新的页面，sessionStorage 将会是全新的

为了实现多个 tab 共享登录凭证，可以通过storage event来实现，实现起来很简单

if (!sessionStorage.length) {
  // 新的页面无sessionStorage
  localStorage.setItem('getSessionStorage', Date.now());
};
window.addEventListener('storage', function(event) {
  if (event.key == 'getSessionStorage') {
    // 新的tab想要获取sessionStorage
    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
    localStorage.removeItem('sessionStorage');
  } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
    // 无sessionStorage
    const data = JSON.parse(event.newValue),
    let value;
    for (key in data) {
      sessionStorage.setItem(key, data[key]);
    }
  }
});