HTML5教程离线缓存管理库详解

、HTML5离线缓存技术

支持离线缓存是HTML5中的一个重点，离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用。传统的本地存储数据的方式有 localstorage,sessionstorage和cookie。但是这些传统的方式有着致命的弊端。首先这些传统的存储方式的最大使用空间有限，最多不超过5M;其次它们处理大规模的结构化数据的能力有限。鉴于传统方式的局限性，HTML5提出了三种新的离线缓存解决方案：Web SQL,indexedDB和File System。

其中Web SQL已经不包含在HMLT5规范中，成了一个独立的规范，Web SQL使用的SQL是SQLite。由于无法统一各个浏览器厂商实现的SQL语言,故Web SQL已经被废弃，由indexedDB取代，但是目前很多浏览器支持Web SQL，而且相对于indexedDB和 File System来说，Web SQL的效率最高，访问速度最快，稳定性也最好。

indexedDB也支持本地存储大量对象，并使用健壮的数据访问机制检索数据。但是目前支持Indexedb的浏览器很少，而且规范还在持续更新中，暂时还没有形成一个统一的标准。

在离线环境中，WebDataBase 虽然能够存储并有效地管理和维护客户端的数据集合，但是仍不能满足对包含大段数据文件的存储和多种不同格式文件的保存，于是我们就需要离线的文件管理系统来维护我们工作了，基于HTML5的File System API 就充当这这个角色。File System非常适合大量的存储媒体文件。对于手机端而言，不同的浏览器的实现有所不同，有的浏览器是将文件写入到ROM中，如QQ手机浏览器，有的浏览器是将文件写到SD卡中，如百度浏览器。所以理论上File System可用的空间非常大。

二、手机浏览器支持离线缓存的情况

测试采用的写数据的方式是key-value对，其中value的值150k左右。

由于Web SQL,indexedDB和File System的可用空间容量与手机Temporary storage有关，故测试数据与手机机型和浏览器本身的状态有关，故上述数据仅供参考。测试的过程中还发现有些浏览器HTML5跑分，分数虽然拿到了，但是实际并没有完全实现相关标准。

测试结果显示，手机浏览器对Web SQL,indexedDB和File System支持情况参差不齐，除了chrome支持所有的三种标准之外，其它的手机浏览器支持都不全，对于开发者来说，如果想要用到这些技术，必须先探测浏览器是否支持该标准，只有支持了才可以使用相关的API。为了使开发者透明地使用底层的离线缓存空间，使用者不用自己去测探浏览器究竟支持哪种或者哪几种标准，现在作者开发了一个HTML5离线缓存管理库，用户便可以像调用localstorage一样调用相关的接口即可获取数据，为开发者提供最大的便利。

三、HTML5离线缓存管理库的设计

1、接口设计

在web前端开发的过程中，开发者localstorage的接口使用相对熟悉，故HTML5离线缓存管理库采用类localstorage的接口，异步的调用方式。

设置（key，value）值对

cache.setItem(key, value, suc, err)

key: string类型

value: string类型

suc：设置成功的回调函数

err：设置失败的回调函数

获取键值为key的值

cache.getItem(key, suc, err)

key: string类型

suc：获取成功的回调函数

err：获取失败的回调函数

删除键值为key的项

cache.removeItem(key, suc, err)

key: string类型

suc：删除成功的回调函数

err：删除失败的回调函数

清除所有记录

cache.clear(suc, err)

suc：清除所有记录成功的回调函数

err：清除所有记录失败的回调函数

2、总体设计

HTML5离线缓存管理库采用的优先适配的策略，优先级为Web SQL > File System> indexedDB >localstorage。即js会自动对浏览器就行检测，如果发现支持web SQL，则使用web SQL，如果不支持，则接着检测File System，如果支持则会使用File System，以此类推。

至于为什么将优先级设置为：web SQL > File System> indexedDB >localstorage，主要是基于以下几方面做考虑：

虽然Web SQL是个逐渐废弃的标准，但是目前是浏览支持得最为广泛的技术，而且效率最高，速度最快，稳定性最好，故将其作为首选。

本库对外提供的接口是key-value对的形式，而File System是以文件的形式存在的，为了达到接口的要求需要封装和解析，导致效率下降，故将它的优先级位于web SQL之后，但是它可供使用空间的大小最大，所有将它放在indexedDB之前。

indexedDB将取代Web SQL，但是indexedDB的规范在持续更新中，目前并没有完全形成一个最终的标准，这体现在一些接口的更迭（本缓存库有做兼容），而且支持 indexedDB的浏览器很少，且支持情况不是很好，故将其仅放在localstorage之前。

localstorage存储空间最小，支持最为广泛，故作为一个最保险的后备方案。

为了保证对外提供的是统一的接口，接口传入的数据格式是key-value对的形式，但是由于File System本身是以文件的方式存储数据，所以不太适合处理key-value这类数据。

本库采用的数据存储方式是将key-value保存为JSON格式，通过JSON.stringify将其转化为字符串，并保存到文件中，读取的时候，通过JSON.parse将文件中数据解析为JSON格式。

为了提高File System的存取效率，采用了两种优化策略。首先将数据存于多个文件之中，根据key建立hash映射，每次读取数据，直接从相应的文件中取，这种方式相对于存到一个文件的方式优点是，文件小，故每次读取的数据量小；其次采取缓存的策略，初始化的时候，将文件读取到内存之中，之后每次读取数据的时候直接从内存中取数据即可，这样相比于每次直接从文件中读取数据，效率得到了极大的提升，当更改数据的时候会将缓存中的数据flush到文件中。

3、兼容性问题

由于HTML5相关标准在持续更新中，API随着标准的跟进，也有所变化，如下是一些比较大的改变。

File System

BlobBuilder构造函数被启用，应该使用Blob构造函数，例如：

旧的调用方式：

var bb = new BlobBuilder();

bb.append(JSON.stringify(t.cache[name]));

write.write(bb.getBlob(‘text/plain‘));

新的调用方式：

var bb = new Blob([JSON.stringify(t.cache[name])], {type: "text/plain"});

write.write(bb);

Web SQL

setVersion()方法被废弃，这导致我们在创建数据库和createObjectStore的流程有一些变动，而且多了一些新的回调方法。

//注意区别以前的方法，这里第二个参数不再是description，而是数据库版本号

var request = indexedDB.open(‘mydb‘,1);

request.onsuccess = function(e) { //数据库打开成功回调

DB.db = e.target.result; //我们用DB.db来存放indexdb

callback();

};

//第一次打开数据库或数据库升级时会触发，完成后根据情况触发success或者error

request.onupgradeneeded = function(e){

DB.db = e.target.result;

var db = DB.db;

//createObjectStore,以前需要在setVersion时才能执行。

if(!DB.db.objectStoreNames.contains(‘notes‘)){

// create object store

var store = db.createObjectStore(‘notes‘, {keyPath:‘id‘, autoIncrement:true})

store.createIndex(‘updated‘, ‘updated‘, { unique: false });

}

};

request.onerror = function(e){ //数据库打开错误回调

console.log(e);

}

四、测试

1.测试说明

使用HTML5离线缓存库的测试页面如下：

使用方法：

1.测试setItem

主要测试setItem接口，设置key-value。

2.测试getItem

主要测试getItem接口，根据用户输入的key，点击“确定”，查询对应的记录，如果查询不到对应的记录，value框为空；如果查询到对应的记录，value框中显示查询的结果。

3.测试removeItem

主要测试removeItem接口，用户输入key，点击“确定”后删除key对应的记录。

4.测试clear

主要测试clear接口，点击“确定”，删除所有的记录。

5.自动测试

连续写入key-value数据，其中key为“1”，“2”，“3”递增，value为160.6k的固定字符串。点击“开始”，连续写入该 key-value数据，直到点击“结束”或者离线缓存写满为止；点击“结束”，停止自动写数据。如果重复“开始”操作，需要刷新页面。

2.测试结果

使用HTML5离线缓存管理库对部分手机浏览器的测试结果如下：

3.源文件

HTML5离线缓存管理库的测试链接：

http://3gimg.qq.com/cube/cache/index-1.0.html

五、同步插件

1.使用说明

鉴于前端开发者比较习惯使用同步API，而Web SQL,indexedDB和File System都提供异步API，为了方便开发者，笔者为“HTML5 离线缓存管理库”提供了一个同步插件，方便开发者同步调用相关API，供参考。

“HTML5 离线缓存管理库”的同步插件使用说明：

优点：

(1) 方便开发者使用“HTML5 离线缓存管理库”进行同步操作，开发者可以像调用localstorage的方式同步调用相关接口。

(2) 调用者只需初始化一次，在初始化成功后便可进行余下操作。

(3) 由于开发者调用的接口其实都是从内存中取得数据，故速度比较快，flush等操作让后台处理。

缺点：

(1) 离线缓存方式fileSystem,indexdb和webSQL系统提供的API就是异步的方式，为了封装接口提供同步的API，必然有效率上的损失。因为启动时会一次性加载离线缓冲库中的所有数据，故获取数据的时间会相应变长，对于少量数据，可以忽略不计，如果数据量特别大，即该插件会明显减慢加载速度。

(2) 数据会全部拷贝到内存中，会占用部分浏览器内存。

建议：

该插件式为了方便同步使用离线缓存库，对于小数据量很方便，对于大数据来说，不推荐使用该插件，建议都采用异步的方式调用离线缓存库提供的接口API。

注：正常使用该库的时候必须保证synCache初始化成功。

2.源文件

HTML5离线缓存管理库的同步插件链接：

http://3gimg.qq.com/cube/cache/cache_plugin_sync-1.0.js

目前，“手机酷站”iphone版使用了"HTML5离线缓存管理库"和“同步插件”，相关链接如下：

http://app.html5.qq.com/ip/index

学习软件行业，选择就业的机会更多，拿到的薪水也更可观，Web前端开发随着互联网的不断发展，就业前景更广泛。千锋教育重庆Web前端培训，专业的IT培训机构，全国15所城市都设有分校，是IT职业教育领先品牌，学员入学就签订就业协议，2017年毕业学员首次就业平均月薪10000元，强大的师资力量与完善的就业体系，让你高薪就业不再是梦想!

、什么是应用程序缓存:

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网

连接时进行访问

2、应用缓存的优势:

1): 离线浏览-用户可在应用离线时使用它们

2):速度-已缓存资源加载得更快

3):减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源

3、实现缓存:

如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性

manifest文件的建议的文件扩展名是:’.appcache'"

4、Manifest 文件:

1): CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存

2): NETWORK -在此标题下列出的文件需要与服务器的连接，且不会被缓存

3): FALLBACK -在此标题下列出的文件规定当页面无法访问时的回退页面(比如

404页面)

具体使用：1、在html页面的html标签里面添加.appcache 的文件
2、创建对应的.appcache文件
3、在缓存文件里面写上 CACHE MANIFEST 注意是大写哦
接着写上CACHE:../db.html
db.js

db.html页面里面：<html manifest="js/db.appcache">db.appcache文件创建在js文件夹里面，创建的时候，选择创建文件即可

页面加上缓存后，本地打开服务器html5页面速度会变快，或者服务器没有连接上，本地也可以显示页面数据

言

本篇文章主要介绍了前端HTML5几种存储方式的总结，主要包括本地存储localstorage，本地存储sessionstorage，离线缓存（application cache），Web SQL，IndexedDB。有兴趣的可以了解一下。

正文开始~

总体情况

h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污染。

主要应用：购物车、客户登录

对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。

目标

解决4k的大小问题
解决请求头常带存储信息的问题
解决关系型存储的问题
跨浏览器

1.本地存储localstorage

存储方式：

以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

大小：

每个域名5M

支持情况：

注意：IE9 localStorage不支持本地文件，需要将项目署到服务器，才可以支持！

if(window.localStorage){
 
 alert('This browser supports localStorage');
 
}else{
 
 alert('This browser does NOT support localStorage');
 
}

常用的API：

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

存储的内容：

数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）

2.本地存储sessionstorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

3.离线缓存（application cache）

本地缓存应用所需的文件

使用方法：

①配置manifest文件

页面上：

<!DOCTYPE HTML>
 
<html manifest="demo.appcache">
 
...
 
</html>

Manifest 文件：

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

①CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

②NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整demo：

CACHE MANIFEST
 
# 2016-07-24 v1.0.0
 
/theme.css
 
/main.js
 
 
 
NETWORK:
 
login.jsp
 
 
 
FALLBACK:
 
/html/ /offline.html

服务器上：manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"。

如Tomcat:

<mime-mapping>
 
 <extension>manifest</extension>
 
 <mime-type>text/cache-manifest</mime-type>
 
</mime-mapping>

常用API：

核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：

0（UNCACHED） : 无缓存，即没有与页面相关的应用缓存

1（IDLE） : 闲置，即应用缓存未得到更新

2 （CHECKING） : 检查中，即正在下载描述文件并检查更新

3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源

4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕

5 （IDLE） : 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

相关的事件：

表示应用缓存状态的改变：

checking : 在浏览器为应用缓存查找更新时触发

error : 在检查更新或下载资源期间发送错误时触发

noupdate : 在检查描述文件发现文件无变化时触发

downloading : 在开始下载应用缓存资源时触发

progress：在文件下载应用缓存的过程中持续不断地下载地触发

updateready : 在页面新的应用缓存下载完毕触发

cached : 在应用缓存完整可用时触发

Application Cache的三个优势：

① 离线浏览

② 提升页面载入速度

③ 降低服务器压力

注意事项：

1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）

2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存

3. 引用manifest的html必须与manifest文件同源，在同一个域下

4. 浏览器会自动缓存引用manifest文件的HTML文件，这就导致如果改了HTML内容，也需要更新版本才能做到更新。

5. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面

6. FALLBACK中的资源必须和manifest文件同源

7. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件。

8. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问

9. 当manifest文件发生改变时，资源请求本身也会触发更新

离线缓存与传统浏览器缓存区别：

1. 离线缓存是针对整个应用，浏览器缓存是单个文件

2. 离线缓存断网了还是可以打开页面，浏览器缓存不行

3. 离线缓存可以主动通知浏览器更新资源

4.Web SQL

关系数据库，通过SQL语句访问

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

支持情况：

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法：

①openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

②transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

③executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
 
//openDatabase() 方法对应的五个参数分别为：数据库名称、版本号、描述文本、数据库大小、创建回调

执行查询操作：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 
db.transaction(function (tx) { 
 
 tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
 
});

插入数据：　

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 
db.transaction(function (tx) {
 
 tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
 
 tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
 
 tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
 
});

读取数据：

db.transaction(function (tx) {
 
 tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
 
 var len = results.rows.length, i;
 
 msg = "<p>查询记录条数: " + len + "</p>";
 
 document.querySelector('#status').innerHTML += msg; 
 
 for (i = 0; i < len; i++){
 
 alert(results.rows.item(i).name );
 
 }
 
 }, null);
 
});

由这些操作可以看出，基本上都是用SQL语句进行数据库的相关操作，如果你会MySQL的话，这个应该比较容易用。

5.IndexedDB

索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。

异步API：

在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式，比如打开数据库的操作

这样，我们打开数据库的时候，实质上返回了一个DB对象，而这个对象就在result中。由上图可以看出，除了result之外。还有几个重要的属性就是onerror、onsuccess、onupgradeneeded（我们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用）。这就类似于我们的ajax请求那样。我们发起了这个请求之后并不能确定它什么时候才请求成功，所以需要在回调中处理一些逻辑。

关闭与删除：

function closeDB(db){
 
 db.close();
 
}
 
function deleteDB(name){
 
 indexedDB.deleteDatabase(name);
 
}

数据存储：

indexedDB中没有表的概念，而是objectStore，一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。也就是说一个objectStore相当于一张表，里面存储的每条数据和一个键相关联。

我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异。

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明获取web前端入门资料，一起学习，一起成长！

在线咨询

上一篇：多语言网站如何将网页的本地化版本录入 Google - html标记
下一篇：推荐几个个人精美网站响应式html5网站模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5教程 离线缓存管理库详解

总体情况

1.本地存储localstorage

2.本地存储sessionstorage

3.离线缓存（application cache）

4.Web SQL

5.IndexedDB

您的项目需求

HTML5教程离线缓存管理库详解