随着HTML5的正式定稿，我们也可以大量使用HTML离线网络应用程序的特性。
Application Cache 可以很简单让我们的WebApp具有离线的能力。
支持的浏览器：IE10+，FireFox，Chrome，Safari，Opera
优点：
缺点：
如何使用？
Step1:在html上指定manifest文件 (index.html)
<html manifest="appCacheList.manifest">
</html>
Step2:设定manifest文件内容 (appCache.manifest)
CACHE MANIFEST
# 离线缓存的内容
./all.css
./1.jpg
./index.js
# NETWORK:*，表示其他内容从网络获取
NETWORK:
*
# 第一个uri是资源，第二个是fallback
FALLBACK:
/html/ /offline.html
手动更新缓存：
if ( window.applicationCache.status == window.applicationCache.UPDATEREADY ){
window.applicationCache.update();
}
注意：
Local Storage使得我们可以在浏览器中保存数据。
支持的浏览器：IE10+，FireFox，Chrome，Safari，Opera
优点：
缺点：
如何使用？
首先通过 window.localStorage 来判断浏览器是否支持Local Storage。然后由于该方式具有浏览器兼容性，建议用一个通用的库，来屏蔽兼容性。
// 对基本方法的封装，需要判断浏览器，屏蔽它们的细节差异。
(function(window){
if(!window.localStorage){
throw new Error(‘Your brower can\‘t support local storage!‘);
}
var ls = window.localStorage;
var localStorageKit = {
getLength: function(){
return ls.length;
},
clear: function(){
ls.clear();
return true;
},
set: function(k, v){
ls.setItem(k, v);
},
get: function(k){
return ls.getItem(k);
},
remove: function(k){
ls.removeItem(k);
},
getKeyByIndex: function(index){
return ls.key(index);
}
};
window.lsKit = localStorageKit;
})(window);
基本操作方式与cookie无太多差异。
Session Storage： Session Storage和Local Storage非常类似，操作方式也一致。由于其中保存的存只是当前会话有效，那么此处就不细说。
Web Sql Database，是html5环境下可以用js执行CRUD的web数据库。数据库核心是SQLite。
优点：
缺点：
如何使用？
首先，先介绍Web sql的三个核心方法：
executeSql：这个方法用于执行真实的SQL查询。
var db = openDatabase(‘mydb‘, ‘1.0‘, ‘Test DB‘, 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)‘); tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, "foobar")‘); tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, "logmsg")‘); console.log(‘Log message created and row inserted.‘); }); db.transaction(function (tx) { tx.executeSql(‘SELECT * FROM LOGS‘, [], function (tx, results) { var len = results.rows.length, i; console.log(‘Found rows: ‘ + len); for (i = 0; i < len; i++){ console.log(results.rows.item(i).log) } }, null); });
当成数据库用，就行。
IndexedDB是结构化的本地数据存储。是基于平面文件的数据库，采用了分层的键值存储和基本的索引。
优点：
缺点：
如何使用？
// 打开数据库，第一个参数为数据库名，第二个为数据库版本号
var dbRequest = window.indexedDB.open(‘testDb‘, 2);
dbRequest.onupgradeneeded=function(e){
// 创建数据仓库
var db=e.target.result;
if(!db.objectStoreNames.contains(‘users‘)){
var store=db.createObjectStore(‘users‘,{keyPath: ‘id‘});
store.createIndex(‘nameIndex‘,‘name‘,{unique:true});
store.createIndex(‘ageIndex‘,‘age‘,{unique:false});
}
console.log(‘upgrade successfully!‘);
};
dbRequest.onsuccess = function(e){
console.log(‘Open database successfully!‘);
// 这里拿到了数据库
var db = e.target.result;
var storeName = ‘users‘;
// 写入数据
var tran = db.transaction(storeName, ‘readwrite‘);
var users = tran.objectStore(storeName);
for(var i = 0; i < 5; i++){
users.add({
id: i,
name: ‘user‘ + i,
age: Math.floor(Math.random() * 10) + 18
});
}
//查询数据
var userStore = db.transaction(storeName).objectStore(storeName);
var request = userStore.openCursor();
request.onsuccess = function(e){
var cursor = e.target.result;
if(cursor){
console.log(cursor.key);
console.log(cursor.value);
cursor.continue();
}
}
}
HTML 5中几种用于在客户端本地存储数据的API之间的比较
原文：http://www.cnblogs.com/humin/p/4214627.html