对于以下需求：
离线存储读取数据
允许用户对数据进行增删改操作
数据存储在本地，不依赖后端
数据支持索引查询
我们可以考虑使用html5新特性的本地存储，主要有以下几种：
Web Sql(IE,FF都不支持,http://www.w3.org/TR/webdatabase/)
IndexedDB
Local Storage(轻松存储简单的数据结构，如果存储复杂的较麻烦)
Session Storage(同Localstorage)
Cookies(有限制)
Application Cache(随后介绍)
我们可以考虑使用indexedDb来实现功能：
首先定义数据库对象
var testDB = {
name : "eason",
version: 1,
db : null};然后是数据库初始化：
function initDB(dbObj) {
dbObj.version = dbObj.version || 1;
var request = indexedDB.open(dbObj.name, dbObj.version);
request.onerror = function (e) {
console.log(e.currentTarget.error.message);
};
request.onsuccess = function (e) {
dbObj.db = e.target.result;
};
request.onupgradeneeded = function (e) {
var thisDB = e.target.result;
if (!thisDB.objectStoreNames.contains("material")) {
var objStore = thisDB.createObjectStore("material",
{keyPath: "id", autoIncrement: true});
objStore.createIndex("wxid", "wxid", {unique: true});
}
if (!thisDB.objectStoreNames.contains("account")) {
var objStore = thisDB.createObjectStore("account",
{keyPath: "id", autoIncrement: true});
objStore.createIndex("wxid", "wxid", {unique: true});
objStore.createIndex("nickName", "nickName", {unique: false});
}
};关闭数据库：
function closeDB(dbObj) {
dbObj.db.close();
}删除数据库：
function deleteDB(dbObj) {
indexedDB.deleteDatabase(dbObj.name);
}数据库表的CRUD操作：
Create：
function addData(dbObj, tableName, data, cb) {
var transaction = dbObj.db.transaction(tableName, ‘readwrite‘);
transaction.oncomplete = function () {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event)
};
var objectStore = transaction.objectStore(tableName);
var request = objectStore.add(data);
request.onsuccess = function (e) {
if (cb) {
cb({
error: 0,
data : data
})
}
};
request.onerror = function (e) {
if (cb) {
cb({
error: 1
})
}
}
}删除数据：
function deleteData(dbObj, tableName, id, cb) {
var transaction = dbObj.db.transaction(tableName, ‘readwrite‘);
transaction.oncomplete = function () {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event)
};
var objectStore = transaction.objectStore(tableName);
var request = objectStore.delete(parseInt(id));
request.onsuccess = function (e) {
if (cb) {
cb({
error: 0,
data : parseInt(id)
})
}
};
request.onerror = function (e) {
if (cb) {
cb({
error: 1
})
}
}
}查询数据：
（1）查询全部：
function getDataAll(dbObj, tableName, cb) {
var transaction = dbObj.db.transaction(tableName, ‘readonly‘);
transaction.oncomplete = function () {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event)
};
var objectStore = transaction.objectStore(tableName);
var rowData = [];
objectStore.openCursor(IDBKeyRange.lowerBound(0)).onsuccess = function (event) { var cursor = event.target.result;
if (!cursor && cb) {
cb({
error: 0,
data : rowData
}); return;
}
rowData.push(cursor.value);
cursor.continue();
};
}（2）根据id查询数据
function getDataById(dbObj, tableName, id, cb) {
var transaction = dbObj.db.transaction(tableName, ‘readwrite‘);
transaction.oncomplete = function () {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event)
};
var objectStore = transaction.objectStore(tableName);
var request = objectStore.get(id);
request.onsuccess = function (e) {
if (cb) {
cb({
error: 0,
data : e.target.result
})
}
};
request.onerror = function (e) {
if (cb) {
cb({
error: 1
})
}
}
}（3）根据关键词索引数据：
function getDataBySearch(dbObj, tableName, keywords, cb) {
var transaction = dbObj.db.transaction(tableName, ‘readwrite‘);
transaction.oncomplete = function () {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event)
};
var objectStore = transaction.objectStore(tableName);
var boundKeyRange = IDBKeyRange.only(keywords); var rowData;
objectStore.index("nickName").openCursor(boundKeyRange).onsuccess = function (event) { var cursor = event.target.result;
if (!cursor) {
if (cb) {
cb({
error: 0,
data : rowData
})
} return;
}
rowData = cursor.value;
cursor.continue();
};
}（4）根据页面索引数据：
function getDataByPager(dbObj, tableName, start, end, cb) {
var transaction = dbObj.db.transaction(tableName, ‘readwrite‘);
transaction.oncomplete = function () {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event)
};
var objectStore = transaction.objectStore(tableName);
var boundKeyRange = IDBKeyRange.bound(start, end, false, true);
var rowData = [];
objectStore.openCursor(boundKeyRange).onsuccess = function (event) {
var cursor = event.target.result;
if (!cursor && cb) {
cb({
error: 0,
data : rowData
}); return;
}
rowData.push(cursor.value);
cursor.continue();
};
}更新数据：
function updateData(dbObj, tableName, id, updateData, cb) {
var transaction = dbObj.db.transaction(tableName, ‘readwrite‘);
transaction.oncomplete = function () {
console.log("transaction complete");
};
transaction.onerror = function (event) {
console.dir(event)
};
var objectStore = transaction.objectStore(tableName);
var request = objectStore.get(id);
request.onsuccess = function (e) {
var thisDB = e.target.result;
for (key in updateData) {
thisDB[key] = updateData[key];
}
objectStore.put(thisDB);
if (cb) {
cb({
error: 0,
data : thisDB
})
}
};
request.onerror = function (e) {
if (cb) {
cb({
error: 1
})
}
}
}本文出自 “Eason's hcc” 博客，请务必保留此出处http://hcc0926.blog.51cto.com/172833/1588676
原文地址：http://hcc0926.blog.51cto.com/172833/1588676
