青青草国产精品一区二区,久久久精品中文字幕麻豆发布,高清不卡亚洲

主頁 > 知識庫 > html5 初試 indexedDB(推薦)

html5 初試 indexedDB(推薦)

indexedDB是存儲大量結構化數據的API，demo中用到的是異步API，麻煩的就是所有對indexedDB的操作都會發生一個異步的‘請求’，只要熟悉了API操作起來也很簡單。

大體流程是這樣

1.打開數據庫

JavaScript Code復制內容到剪貼板

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 暫時用到兩個參數，數據庫&&主鍵
}
}
}

這樣就創建/連接了一個數據庫

2.創建交互對象 && 監聽dom事件 && 處理數據

然后就是要操作數據庫了

JavaScript Code復制內容到剪貼板

//插入數據暫時只插入一列
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);
};

JavaScript Code復制內容到剪貼板

//讀取數據
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(); //循環讀取所有數據
};

JavaScript Code復制內容到剪貼板

//刪除數據
...
store.delete('鍵值')
...

出了一個小demo

XML/HTML Code復制內容到剪貼板

<!DOCTYPE html>
<html>
<head>
<script>
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);
</script>
</head>
<body>
<ul id="todoItems"></ul>
<input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />
<input type="submit" value="增加一個 IDB" onclick="addTodo(); return false;"/>
</body>
</html>

以上這篇html5 初試 indexedDB(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html

標簽：煙臺撫州晉中玉溪內蒙古牡丹江邯鄲安慶

巨人網絡通訊聲明：本文標題《html5 初試 indexedDB(推薦)》，本文關鍵詞 html5,初試,indexedDB,推薦,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。

婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

html5 初試 indexedDB(推薦)