聊 Cookie

1. Cookie 是怎么出现的？

可由服务端设置，也可由客户端设置，如果两端都没有设置则不存在 Cookie
来源于客户端设置，即通过document.cookie = 'xxx=yyy'的形式
来源于服务端设置，操作如下：
1. 浏览器发送 HTTP 请求
2. 服务器收到请求，设置 Cookie 并在响应头添加Set-Cookie 字段
3. 浏览器收到响应后保存 Cookie
4. 下次请求该服务器都通过Cookie字段将 Cookie 发送给服务器

2. Cookie 格式

Cookie 以键值对形式的字符串保存，即key=value，例如name=cookie_name。除了 Name/Value 外，Cookie 字符串值中还存在许多特殊的 key 值，具体如下：

Path：指定一个 URL 路径，如果没有定义则使用当前文档位置的路径。如果设置了path=/docs，那么/test路径下不会携带 Cookie 首部，/docs/test则会携带
Domain：指定可以送达的域名，如果没有指定，默认为当前文档位置的路径的域名部分。这里要注意的是，不能跨域设置 Cookie，如果在a.com下设置此属性为b.com是无效的。Domain与Path一起为 Cookie 指定作用域，即在哪些 URL 下是有效的。
Expires：用于设置 Cookie 的过期时间，默认值为Session，表示为会话性 Cookie。
Max-Age：设置到失效的时长，有三种情况如下。当与 Expires 属性并存，优先级高于 Expires
- 正数：持久化缓存直到过期
- 负数：会话性 Cookie
- 0：立即删除
Secure：表示 Cookie 只通过 https 协议传输。
HTTPOnly：增删改查只由服务端操作，客户端脚本不得操作。
SameSite：可以让 Cookie 在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）。最近很热门，因为 Chrome80 版本中默认屏蔽了第三方的 Cookie。包含以下可选的三个值：
- Strict：仅发送与当前 URL 相同站点的 Cookie
- Lax：允许部分第三方请求携带 Cookie
- None：无论是否跨站都会携带 Cookie

3. 操作 Cookie 如何清除 Cookie

操作时需要注意的是，要将值转换为字符串，最好通过encodeURIComponent。另外赋值 Cookie 时，每一次都是一条新的记录（key 值相同会覆盖）。

  // 浏览器设置
  document.cookie = 'name=cookie';
  document.cookie;  //name=cookie

  //再次设置时，值会追加在后面
  document.cookie = 'age=18';
  document.cookie;  //name=cookie; age=18

  //相同key值的设置
  document.cookie = 'name=cookie_again';
  document.cookie;  //name=document.cookie; age=18

  //一次写入多个key/value
  document.cookie = 'name=cookie;age=18'
  document.cookie  //name=cookie，并不支持一次写入多个

  //设置特殊属性
  document.cookie = 'name=cookie;max-age=60000';  //成功

  //单独设置特殊属性
  document.cookie = 'max-age=6000';
  document.cookie;  //max-age=6000，单独设置会转化为key/value

4. Cookie 的作用是什么？

Cookie 根据作用不同，分为以下两类：

会话性 Cookie：当Expires/Max-Age属性缺省时，表现为会话性。此时值保存在客户端内存中，当关闭浏览器时失效。值得注意的是，有些浏览器会有会话恢复功能，这种情况下就算关闭浏览器，会话 Cookie 依然会被保留下来。
持久性 Cookie：持久性 Cookie 与会话性不同，会保存在硬盘中，直至过期或被清除。持久性 Cookie 一般是客户端用来缓存用户数据。

5. Cookie 有什么特点/限制？

管理会话状态
浏览器行为跟踪
最大容量 4kb
每次请求时会附带在头部发送给服务器，会增加请求的大小
安全问题，好吧，存在浏览器的都不怎么安全

聊 Storage

有 localStorage 与 sessionStorage 两种，区别在于 sessionStorage 是会话性缓存，在当前标签页关闭（或浏览器关闭）后会被清除。而 localStorage 是持久性缓存，只要不手动清除可一直保留。
限制
- 大小：一般浏览器为 5M 左右，网上有一部分资料说微信等浏览器只有 2.5M，于是用http://dev-test.nemikor.com/web-storage/support-test/这个网站测试了一下微信 webview，显示的依然是 5M 左右。问题来了，**如果超出使用大小限制会如何？**答案是会抛出错误QUOTA_EXCEEDED_ERR
- 跨域：浏览器同源策略，只可以访问同源下的 Storage，而 sessionStorage 在此基础上更进一步，只能访问同一标签页中的 Storage，同一页面内嵌的同源 iframe 的 Storage 也可以访问。
- 是否可用：目前的兼容性是很好的，但有些情况需要一定的手段去检测是否可用，比如在隐身/无痕模式下的 safari，存在 localStorage 对象，但无进行 setItem 操作。

选择使用哪种

成熟的人不做选择，成熟的人都想要 😁。在项目中应当结合实际的需求进行取舍，比如：

需要兼容到极低版本的浏览器（懂的都懂），那么肯定使用 Cookie 了
少量的用户状态数据，且有会话性 Cookie 需求，Cookie 会更好
大容量的存取，选 Storage
需要持久化缓存，localStorage 吧
只需要在当前页面使用的数据，sessionStorage 搞一个
……

localStorage 如何实现与 Cookie 一样的过期功能

localStorage 本身并没有缓存过期的实现，所以有需要的话开发人员自己去扩展。思路也很简单，在设置缓存时传入过期时间，以及记录设置时的初始时间戳，这样在获取缓存时即可通过对比当前时间查看是否已过期，简单的实现如下：

const $local = {
    /**
     * 设置缓存
     * @param {string} key
     * @param {*} value
     * @param {number} expires 多少毫秒后过期
     */
    set: (key, value, expires) => {
        localStorage.setItem(key, JSON.stringify({
            value: value,
            expires: expires,
            startTime: Date.now()  //缓存设置时间
        }))
    },

    /**
     * 获取缓存
     * @param {string} key
     */
    get: key => {
        let cache = localStorage.getItem(key);

        //无缓存值
        if (!cache) {
            return undefined
        }

        let {expires, startTime, value} = JSON.parse(cache);

        //已过期
        if (expires && Date.now() - startTime > expires) {
            return undefined
        }

        return value
    }
}

如何确定是否 localStorage 是否可用呢？

以下是大致的思想，当然在项目中会把用成熟的库来进行操作，推荐store.js等库。

  //检测是否存在localStorage
  if ('localStorage' in window) {
      try {
          //可用
          localStorage.setItem('incognito.test', '1');
      } catch (error) {
          //不可用
      }
  } else {
      //不可用
  }

同源多页面通讯

这也是一个比较常见的问题，实现的方法有很多，其中就包括使用StorageEvent来实现。什么是StorageEvent呢？其实就是一个事件，当 Storage 被设置时会触发，注意点如下。利用这个事件即可实现同源多页面通讯

当前页面 Storage 改变不会触发此事件，非当前页（同源）会收到此事件。实现如下
```
window.addEventListener('storage', function (e) {
  //在此进行操作
});
```

设置的 key 值没有改变也不会触发此事件

//第一次触发事件
window.localStorage.setItem('test', '123');
//值没有改变，第二次不触发
window.localStorage.setItem('test', '123');

结语 🤔

回顾了下 Cookie 与 Storage，有部分是之前没有注意到的，比如突破 Storage 存储限制后会抛出错误；在使用 localStorage，并以持久化存储为目标时并不绝对可靠，例如在手机浏览器/webview 中，系统内存不足时会自动清理缓存文件，这些都是平时没有注意到的地方。

部分内容来自以下 blog

实现 localStorage 跨域 https://zhuanlan.zhihu.com/p/35738376

https://imweb.io/topic/5590a443fbb23aae3d5e450a

https://github.com/mqyqingfeng/Blog/issues/157