谈谈浏览器本地缓存

聊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

1. 有localStorage与sessionStorage两种，区别在于sessionStorage是会话性缓存，在当前标签页关闭（或者浏览器关闭）后会被清理。而localStorage是持久性缓存，只需不手动清理可一直保留。
2. 限制

   • 大小：一般浏览器为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
• mqyqingfeng/Blog/issues/157