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