标签：IndexedDB function 浏览器 request 数据库 db window id store
摘要
在移动端H5页面开发的时候，为了更好的提高用户体验，可以对不常变化的数据做浏览器端数据缓存，在用户打开页面的时候，首先加载本地的数据，然后异步请求服务端，更新数据。在移动端webview中，可以使用IndexedDB的方式对数据进行存储。当然如果数据量不大的情况下，localstorage也是一种选择。
什么是IndexedDB
一般来说，数据库分两种类型：关系型和文档型（也称NoSQL或者对象）。关系型数据库如SQL Server，MySQL，Oracle的数据存储在表中。文档数据库如Mongodb,Redis,CouchDB将数据集作为个体对象存储。IndexedDB是一个文档数据库，它在完全内置于浏览器中的一个沙盒环境中（强制依照（浏览器）同源策略）。如下图所示，展示了数据库的结构：
关于Indexeddb的增删该查，可以使用这篇文字封装的插件进行使用。
http://www.codemag.com/Article/1411041
index.db.js
//index.db.js
;
window.indexedDB = window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction ||
window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange ||
window.msIDBKeyRange;
(function (window) {
'use strict';
var db = {
version: 1, // important: only use whole numbers!
objectStoreName: 'tasks',
instance: {},
upgrade: function (e) {
var
_db = e.target.result,
names = _db.objectStoreNames,
name = db.objectStoreName;
if (!names.contains(name)) {
_db.createObjectStore(
name,
{
keyPath: 'id',
autoIncrement: true
});
}
},
errorHandler: function (error) {
window.alert('error: ' + error.target.code);
debugger;
},
open: function (callback) {
var request = window.indexedDB.open(
db.objectStoreName, db.version);
request.onerror = db.errorHandler;
request.onupgradeneeded = db.upgrade;
request.onsuccess = function (e) {
db.instance = request.result;
db.instance.onerror =
db.errorHandler;
callback();
};
},
getObjectStore: function (mode) {
var txn, store;
mode = mode || 'readonly';
txn = db.instance.transaction(
[db.objectStoreName], mode);
store = txn.objectStore(
db.objectStoreName);
return store;
},
save: function (data, callback) {
db.open(function () {
var store, request,
mode = 'readwrite';
store = db.getObjectStore(mode),
request = data.id ?
store.put(data) :
store.add(data);
request.onsuccess = callback;
});
},
getAll: function (callback) {
db.open(function () {
var
store = db.getObjectStore(),
cursor = store.openCursor(),
data = [];
cursor.onsuccess = function (e) {
var result = e.target.result;
if (result &&
result !== null) {
data.push(result.value);
result.continue();
} else {
callback(data);
}
};
});
},
get: function (id, callback) {
id = parseInt(id);
db.open(function () {
var
store = db.getObjectStore(),
request = store.get(id);
request.onsuccess = function (e) {
callback(e.target.result);
};
});
},
'delete': function (id, callback) {
id = parseInt(id);
db.open(function () {
var
mode = 'readwrite',
store, request;
store = db.getObjectStore(mode);
request = store.delete(id);
request.onsuccess = callback;
});
},
deleteAll: function (callback) {
db.open(function () {
var mode, store, request;
mode = 'readwrite';
store = db.getObjectStore(mode);
request = store.clear();
request.onsuccess = callback;
});
}
};
window.app = window.app || {};
window.app.db = db;
}(window));
index.db.js使用
设置数据库名称
//indexed db name
app.db.objectStoreName = "mytestdb";
添加数据
//add data
app.db.save({ id: 2, name: "wolfy" }, function () {
//回调函数
console.log("添加成功");
});
查询数据
根据id查询
//查询
app.db.get(1, function (item) {
console.log(item);
});
查询所有
//query all
app.db.getAll(function (items) {
console.log(items);
});
结果
删除数据
删除id为2的数据
//delete
app.db.delete(2, function () {
console.log('删除成功');
})
删除所有
app.db.deleteAll(function () {
console.log("删除成功");
})
修改
//add data
app.db.save({ id: 2, name: "wolfy2" }, function () {
//回调函数
console.log("添加成功");
});
总结
在优化移动端h5页面的时候，对不经常变化的数据进行本地存储，在访问页面的时候先加载本地的然后异步更新本地数据。
参考资料
http://www.codemag.com/Article/1411041
http://www.cnblogs.com/wolf-sun/
博客版权:如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。
标签：IndexedDB,function,浏览器,request,数据库,db,window,id,store 来源： https://www.cnblogs.com/onesea/p/14875787.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。