浏览器内置数据库indexDB本地存储

H5出来后浏览器多了几种存储方式, 如 localStorage、sessionstorage application cache Web SQL IndexedDB.
目前我们项目最主要用到就是localStorage、indexDB.
今天主要看看indexDB的一些用法
一、获取indexDB对象，考虑到浏览器兼容性

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

二、打开数据库

var db;
var request = window.indexedDB.open("newDatabase", 1);
request.onerror = function(event) {
    console.log("error: open failed");
 };
request.onsuccess = function(event) {
    db = request.result;
    console.log("open-->success: "+ db);
    console.log(db);
};

三、创建主键、索引等

request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("employee", {keyPath: "name"});
    for (var i in employeeData) {
       alert(employeeData[i].name);
       objectStore.add(employeeData[i]);
    }
    console.log('---------------onupgradeneeded--------add-----');
    console.log(db);
};

四、写入、读取

function read(readKey) {
    var transaction = db.transaction(["employee"]);
    var objectStore = transaction.objectStore("employee");
    var request = objectStore.get(readKey);
    request.onerror = function(event) {
       alert(readKey + "Unable to retrieve data from database!");
    };
    request.onsuccess = function(event) {
       if(request.result) {
          alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
       } else {
          alert(readKey + " Couldn't be found in your database!");
       }
    };
 }

五、删除

	function deletedatabase(dbName) {
		try {
			indexdDB.deleteDatabase(dbName);
		} catch(e) {
			alert(e.target.getMessage);
		}
	}

下面是完整的例子

(function() {
	var blockbusters = {
		title: 'James wins a Game',
		derector: 'shi',
		length: 120
	};
	var db;
	var request;
	var store;

	function createDatabase(dbName) {
		request = indexdDB.open(dbName, 3);
		request.onsuccess = function(event) {
			alert('success open the database!');
			db = event.target.result;
			var transaction = db.transaction(["blockbusters"], "readwrite");
			var objectStore = transaction.objectStore("blockbusters");
			objectStore.add(blockbusters);
		};
		request.onerror = function(event) {
			alert("fail to open database :: " + event.target.message);
		};

		request.onupgradeneeded = function(event) {
			alert('version changed!');
			db = event.target.result;
			store = db.createObjectStore("blockbusters",
										 {
										 	keyPath: "title",
										 	autoIncrement: false
										 });
		};
	}

	function deletedatabase(dbName) {
		try {
			indexdDB.deleteDatabase(dbName);
		} catch(e) {
			alert(e.target.getMessage);
		}
	}
})();



/*------------------------------------*/


window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB.");
}
const employeeData = [
    { id: "00-01", name: "james-1", age: 31, email: "[email protected]" },
    { id: "00-02", name: "curry-2", age: 32, email: "[email protected]" },
    { id: "00-03", name: "durant-3", age: 33, email: "[email protected]" },
    { id: "00-04", name: "wade-4", age: 34, email: "[email protected]" }
 ];
var db;
var request = window.indexedDB.open("newDatabase", 1);
request.onerror = function(event) {
    console.log("error: open failed");
 };
request.onsuccess = function(event) {
    db = request.result;
    console.log("open-->success: "+ db);
    console.log(db);
};
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("employee", {keyPath: "name"});
    for (var i in employeeData) {
       alert(employeeData[i].name);
       objectStore.add(employeeData[i]);
    }
    console.log('---------------onupgradeneeded--------add-----');
    console.log(db);
};
 
function read(readKey) {
    var transaction = db.transaction(["employee"]);
    var objectStore = transaction.objectStore("employee");
    var request = objectStore.get(readKey);
    request.onerror = function(event) {
       alert(readKey + "Unable to retrieve data from database!");
    };
    request.onsuccess = function(event) {
       if(request.result) {
          alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
       } else {
          alert(readKey + " Couldn't be found in your database!");
       }
    };
 }
 

function readAll() {
    var objectStore = db.transaction("employee").objectStore("employee");
    objectStore.openCursor().onsuccess = function(event) {
       var cursor = event.target.result;
       console.log(cursor.value);
       if (cursor) {
          alert("key is: " + cursor.key + " is " + cursor.value.name + ", Age: " + cursor.value.age + ", Email: " + cursor.value.email);
          cursor.continue();
       } else {
          alert("No more entries!");
       }
    };
 }
 readAll();
function add(myId, myName, myAge, myEmail) {
    var request = db.transaction(["employee"], "readwrite").objectStore("employee").add({
                                                                                           id: myId,
                                                                                           name: myName,
                                                                                           age: myAge,
                                                                                           email: myEmail
                                                                                        });
    request.onsuccess = function(event) {
       alert(myName + " has been added to your database.");
    };
    request.onerror = function(event) {
       alert("Unable to add data\r\n" + myName + "Aready exist in your database!");
    }
 }

function remove(deleteKey) {
    var request = db.transaction(["employee"], "readwrite").objectStore("employee").delete(deleteKey);
    request.onsuccess = function(event) {
       alert(deleteKey + " has been removed from your database.");
    };
 }