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) {             window window.IDBTransaction  = window.webkitIDBTransaction;             window window.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