使用 HTML5 的 IndexedDB API

1. [代码]判断是否支持 IndexedDB     
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
2. [代码]打开数据库     

var db;
var request = indexedDB.open("TestDatabase");
request.onerror = function(evt) {
  console.log("Database error code: " + evt.target.errorCode);
};
request.onsuccess = function(evt) {
  db = request.result;
};
3. [代码]创建存储对象     

var peopleData = [
    { name: "John Dow", email: "[e-mail]" },
    { name: "Don Dow", email: "[e-mail]" }
];
  
function initDb() {
    var request = indexedDB.open("PeopleDB", 1);  
    request.onsuccess = function (evt) {
        db = request.result;                                                            
    };
  
    request.onerror = function (evt) {
        console.log("IndexedDB error: " + evt.target.errorCode);
    };
  
    request.onupgradeneeded = function (evt) {                   
        var objectStore = evt.currentTarget.result.createObjectStore("people", { keyPath: "id", autoIncrement: true });
  
        objectStore.createIndex("name", "name", { unique: false });
        objectStore.createIndex("email", "email", { unique: true });
  
        for (i in peopleData) {
            objectStore.add(peopleData[i]);
        }
    };
}
4. [代码]事务处理     
//判断是否支持事务处理
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
 
var transaction = db.transaction("people", IDBTransaction.READ_WRITE);
var objectStore = transaction.objectStore("people");                    
var request = objectStore.add({ name: name, email: email });
request.onsuccess = function (evt) {
    // do something when the add succeeded                          
};
transaction.oncomplete = function(evt) {  
  // do something after the transaction completed  
};
5. [代码]完整例子



   
   
   


   

       
            Name:
       
       
       

       
            Email:
       
       
       

       
       

       
            ID: