h5手机端浏览器机制_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的消息推送、离线、自动更新等。

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