h5手机端浏览器机制_h5浏览器缓存机制

# 浏览器缓存机制(重要)：

* **Dom Storage(Web Storage)存储机制**：长期存储和临时存储

* **Web SQL Database 存储机制**：二进制 按条例去存储

* **Application Cache(AppCache)机制**：APP存储

* **Indexed Database(IndexedDB)**：只存索引的数据库

* **File System API**：文件接口，占存小

> 注意：旧版本安卓系统开启本地存储需要添加权限

# 离线应用

## 离线应用和浏览器缓存的区别(了解)

* 服务范围不同：离线应用控制对整个web应用进行缓存。离线应用提供的是一种不在线的网站服务功能，而浏览器缓存则只是单纯地缓存网页。

* 可靠性：离线应用可以精确地控制浏览器需要缓存哪些资源，它是非常可靠的；但是浏览器缓存则完全依靠浏览器行为，具有一定的不可靠性。

* 可控制性的不同：离线应用可以准确控制缓存哪些资源，并可控制刷新缓存；但浏览器缓存则完全依靠浏览器行为，程序无法控制缓存，

## 配置缓存文件

* 不同的服务器配置缓存不一样(缓存配置doc)

* 缓存文件配置讲解：

* 缓存文件名称index.manifest

* 如果缓存index.html文件，需要在html后加上对应的缓存文件index.manifest

## 判断在线状态

* navigator.onLine：返回当前是否在线，如果返回值为true，则表示在线，如果返回false则表示离线。(**重要**)

```

window.addEventListener("offline",function(){

alert("您已经变成了离线状态");

},true);

if(navigator.onLine){

alert("在线");

}else{

alert("离线");

}

```

* online/offline事件：如果开发者需要在网咯状态发生变化时立刻得到通知，则可以通过online/offline来检测

* ``指定对那些资源缓存

## 离线应用具体配置(了解)

1. 在服务器中，开启离线应用权限

2. 设置缓存文件(通常用manifest文件缓存)(了解缓存项)

3. 在被缓存的页面中，html标记后加上manifest\*缓存文件属性：例如` `

# H5新增的缓存对象applicationCache对象

* 控制缓存

* applicationcache接口包含了一个status属性，其返回值如下：

* UNCACHE：applicationcache对象所在主机没有开启离线应用功能。

* IDIE：空闲状态

* CHECKING：正在检查本地缓存的manifest文件与服务器端manifest文件的差异

* DOWNLOADING：正在下载需要的缓存的数据

* UPDATEREADY：已经从服务器把缓存的文件下载到本地，但还未更新本地缓存

* OBSOLETE：缓存过期

* applicationcache接口定义了2个方法：

* void update()：该方法强制检查服务器上manifest文件是否有更新

* void swapCache()：该方法用于手动更新本地缓存。它只能在applicationcache对象的updateReady事件被触发时调用。