一、IndexedDB是个啥玩意儿？
IndexedDB，嗯……说实话有点儿深奥。But它就是个数据库，只不过特别适合网页用的那种，主要用来存很多很多的数据。你想想看，你的网页不仅可以看，还能存东西，多牛！IndexedDB就是做这个的。而且它用的还是异步API，就是说你处理数据的时候，网页不会卡住，用户体验超好的。
二、打开你的IndexedDB之旅
首先，你得有个数据库，是不是？比如IndexedDB，最先做的就是开个“数据库门”。听着简单，还真是挺容易的。只要一行代码，就能新创或接入现成的数据库。开门儿进去，里面可是崭新的天地等你来探险！这个步骤虽然简单，但却是你踏入IndexedDB世界的第一步，所以可别小看了它。
三、创建交互对象，准备开始探险
数据库已经开启，我们现在要开始创建交互对象。这家伙就像是个向导，能带着你轻松游遍整个数据库。借助它，你可以随时监听DOM事件，处理各种数据，所有操作全都得心应手。这个过程看起来可能有些复杂，但别担心，只要按照指示一步步来，你会发现其实挺容易的！想象下，只要有了地图和指南针，探险还有什么难度？
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
if ('webkitIndexedDB' in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
//这个就不解释了
var request = indexedDB.open("adsageIDB"); //open ： indexedDB只有这一个方法 打开（数据库名）
request.onsuccess = function(e) { //异步
var v = "1.00";
var db = e.target.result;
if (v!= db.version) {
var setVrequest = db.setVersion(v);
setVrequest.onsuccess = function(e) { //异步
if(db.objectStoreNames.contains("todo")) {
db.deleteObjectStore("todo");
}
var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore 暂时用到两个参数，数据库&&主键
}
}
}
四、监听DOM事件，让数据动起来
搞定交互对象后，剩下就是留意DOM事件。这就好比设好了好多触发器，当你用鼠标点下按钮，或者输点儿啥，马上就能让你的数据库有所感知，并且给点儿反馈。这种感觉就好像你的数据库真的变得聪明起来，能听懂你的话，帮你完成任务。这种互动感，正是IndexedDB最吸引人的地方！
五、处理数据，让信息有序流动
数据监控好了，咱就开始处理！在IndexedDB里，处理数据就是对数据搞点增删改查什么的。看起来有点复杂？别担心，IndexedDB的API挺简单的，手到擒来！想存就存，想拿就拿，不要的还能删掉，这不是很爽吗？所以说，IndexedDB在网页编程这块，绝对是个神器！
六、实战案例：从理论到实践
咱们理论讲了一大堆，接下来就看实际运用！观看实际代码示例，你将学会如何轻松打开数据库，构建交互对象，监控事件，搞定数据等。这些真实案例将助你更深入理解IndexedDB的机理与使用技巧。实践出真知，动起手来，你会发现IndexedDB其实没那么复杂。
七、注意事项：小心驶得万年船
//插入数据 暂时只插入一列
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction
var store = trans.objectStore("todo");//创建Store
//要操作数据必须建立transaction 和 Store
var data = {
"text": todoText,
"adsid": new Date().getTime()
};//一个小数据 adsid是主键
var request = store.put(data); //‘强行’插入
request.onsuccess = function(e) {
//成功后执行一些操作
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
//读取数据
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
//这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数
//另一种方法是get() 这个就比较简单了直接store.get('键值')就行
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
console.log(result.value);
result.continue(); //循环读取所有数据
};
//删除数据
...
store.delete('键值')
...
var indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB;
if ('webkitIndexedDB' in window) {
windowwindow.IDBTransaction = window.webkitIDBTransaction;
windowwindow.IDBKeyRange = window.webkitIDBKeyRange;
}
adsageIDB = {};
adsageIDB.db = null;
adsageIDB.onerror = function(e) {
console.log(e);
};
adsageIDB.open = function() {
var request = indexedDB.open("adsageIDB");
request.onsuccess = function(e) {
var v = "1.00";
adsageIDB.db = e.target.result;
var db = adsageIDB.db;
if (v!= db.version) {
var setVrequest = db.setVersion(v);
setVrequest.onerror = adsageIDB.onerror;
setVrequest.onsuccess = function(e) {
if(db.objectStoreNames.contains("todo")) {
db.deleteObjectStore("todo");
}
var store = db.createObjectStore("todo",
{keyPath: "adsid"});
adsageIDB.getAllTodoItems();
};
}
else {
adsageIDB.getAllTodoItems();
}
};
request.onerror = adsageIDB.onerror;
}
adsageIDB.addTodo = function(todoText) {
var db = adsageIDB.db;
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");
var data = {
"text": todoText,
"adsid": new Date().getTime()
};
var request = store.put(data);
request.onsuccess = function(e) {
adsageIDB.getAllTodoItems();
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};
adsageIDB.deleteTodo = function(id) {
var db = adsageIDB.db;
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");
var request = store.delete(id);
request.onsuccess = function(e) {
adsageIDB.getAllTodoItems();
};
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
};
adsageIDB.getAllTodoItems = function() {
var todos = document.getElementById("todoItems");
todos.innerHTML = "";
var db = adsageIDB.db;
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("todo");
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
renderTodo(result.value);
result.continue();
};
cursorRequest.onerror = adsageIDB.onerror;
};
function renderTodo(row) {
var todos = document.getElementById("todoItems");
var li = document.createElement("li");
var a = document.createElement("a");
var t = document.createTextNode(row.text);
a.addEventListener("click", function() {
adsageIDB.deleteTodo(row.adsid);
}, false);
a.textContent = " [删除]";
li.appendChild(t);
li.appendChild(a);
todos.appendChild(li)
}
function addTodo() {
var todo = document.getElementById("todo");
adsageIDB.addTodo(todo.value);
todo.value = "";
}
function init() {
adsageIDB.open();
}
window.addEventListener("DOMContentLoaded", init, false);
用IndexedDB有几个要留神儿的事儿！首先，大家都知道它是个异步的玩意儿，所以得处理好异步编程那些麻烦事。再者，存取数据时还得考虑性能，别让数据库拖慢了网页速度。虽然看着挺复杂，但只要细心点儿，IndexedDB就能帮你大忙！
八、结语：IndexedDB，不只是存储数据那么简单
IndexedDB不只是存数据，还能让网站更聪明、更有趣，用户体验倍儿棒！希望这篇小文能帮你更好地上手IndexedDB，让你的网页开发更轻松愉快。
评论0