H5 浏览器的9种缓存机制

前言

打开浏览器的Application面板，可看到HTTP文件缓存（Frames下），Local Storage，Session Storage，indexDB，Web SQL，Cookie，CacheStorage，Application Cache，另有一种使用不多的Flash缓存方式

HTTP文件缓存

HTTP文件缓存是基于HTTP协议的浏览器端文件级缓存机制，可在控制台的Frames看到缓存的内容，缓存原理就是Cache-Control和Etag那套，这里略。

200/304区别

localStorage

这是HTML5的本地缓存方案，核心API只有四个：setItem(key,value);getItem(key);removeItem(key);clear()。注意
1、单域名下localStorage在不同浏览器中有长度限制且各不相同；IE8以上为5MB，Chrome或Safari约为2.6MB；
2、只支持简单数据类型，对象类型需JSON.stringify转换
3、多tab打开同域名页面时，localStorage是共享的

sessionStorage

浏览器关闭会消失，使用不多。

Cookie

1、单域名下有个数限制，总大小有长度限制，一般不超过4KB；
2、document.cookie读取不到HttpOnly类型的cookie；
3、分存储型cookie（设置过期时间）和Session型cookie（不设置过期时间），后者浏览器窗口关闭而消失

WebSQL

不是HTML5规范，是单独的规范，HTML5之前就存在；JS端可以操作的小型数据库
，兼容性和使用场景有限。

IndexDB

虽可保存50MB的数据在本地，但不安全，略过

Application Cache

通过manifest配置文件，在本地有选择的存储JS,CSS,图片等。优势：
1、离线浏览
2、快读加载，本地读取
3、资源更新才会拉取数据，减轻服务器压力
注意：
1、引用manifest的HTML，及静态资源必须与manifest同源
2、Application Cache已被废弃，将由ServiceWorker代替

cacheStorage

1、在ServiceWorker中定义，用于保存ServiceWorker声明的cache对象
2、结合ServiceWorker，可做到Web的消息推送、离线、自动更新等。

参考：《现代前端技术解析》