IndexedDB具有以下特點。
（1）鍵值對儲存。 IndexedDB內部采用對象倉庫（object store）存放數據。所有類型的數據都可以直接存入，包括JavaScript對象。在對象倉庫中，數據以“鍵值對”的形式保存，每一個數據都有對應的鍵名，鍵名是獨一無二的，不能有重復，否則會拋出一個錯誤。
（2）異步。 IndexedDB操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與localStorage形成對比，后者的操作是同步的。異步設計是為了防止大量數據的讀寫，拖慢網頁的表現。
（3）支持事務。 IndexedDB支持事務（transaction），這意味着一系列操作步驟之中，只要有一步失敗，整個事務就都取消，數據庫回到事務發生之前的狀態，不存在只改寫一部分數據的情況。
（4）同域限制 IndexedDB也受到同域限制，每一個數據庫對應創建該數據庫的域名。來自不同域名的網頁，只能訪問自身域名下的數據庫，而不能訪問其他域名下的數據庫。
（5）儲存空間大 IndexedDB的儲存空間比localStorage大得多，一般來說不少於250MB。IE的儲存上限是250MB，Chrome和Opera是剩余空間的某個百分比，Firefox則沒有上限。
（6）支持二進制儲存。 IndexedDB不僅可以儲存字符串，還可以儲存二進制數據。
目前，Chrome 27+、Firefox 21+、Opera 15+和IE 10+支持這個API，但是Safari完全不支持。
<!DOCTYPE html>
<html>
<head>
<title>indexedDB：瀏覽器端數據庫 </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://www.xueersi.com/lib/jQuery/1.11.1/jquery.min.js?1458897912"></script>
<style type="text/css">
ul,li{
list-style: none;
float: left;
width: 100%;
}
</style>
</head>
<body>
<button id="add">添加數據</button>
<button id="get">獲取數據</button>
<button id="delete">刪除一條數據</button>
<button id="updata">更新數據</button>
<button id="clear">清空object store</button>
<ul id="display"></ul>
</body>
</html>
<script type="text/javascript">
//ie瀏覽器需要在測試環境中才能運動
const customerData = [
{ ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },
{ ssn: "6-66-66", name: "duxinli", age: 38, email: "duxinli@home.org" }
];
const dbName = "test_duxinli_DB";
var request = indexedDB.open(dbName, 2);
request.onerror = function(event) {
// 錯誤處理程序在這里。
};
var db;
request.onupgradeneeded = function(event) {
db = event.target.result;
// 創建一個對象存儲空間來持有有關我們客戶的信息。
// 我們將使用 "ssn" 作為我們的 key path 因為它保證是唯一的。
var objectStore = db.createObjectStore("customers", { keyPath: 'ssn', autoIncrement: true });
// 創建一個索引來通過 name 搜索客戶。
// 可能會有重復的，因此我們不能使用 unique 索引。
objectStore.createIndex("name", "name", { unique: false });
// 創建一個索引來通過 email 搜索客戶。
// 我們希望確保不會有兩個客戶使用相同的 email 地址，因此我們使用一個 unique 索引。
objectStore.createIndex("email", "email", { unique: false });
// 在新創建的對象存儲空間中保存值
for (var i in customerData) {
objectStore.add(customerData[i]);
}
};
request.onsuccess = function(e) {
console.log("Success!");
db = e.target.result;
}
request.onerror = function(e) {
console.log("Error");
console.dir(e);
}
//獲取數據
function displayPubList() {
$('#display').empty();
var tx = db.transaction('customers', 'readonly');
var store = tx.objectStore('customers');
var req;
req = store.count();
console.log(req)
req.onsuccess = function(evt) {
console.log(evt.target.result)
};
req.onerror = function(evt) {
console.error("add error", this.error);
};
req.onerror = function(evt) {
console.error("add error", this.error);
displayActionFailure(this.error);
};
req = store.openCursor();
req.onsuccess = function(evt) {
var cursor = evt.target.result;
if(cursor){
var result = evt.target.result.value;
var val = result.ssn + "~~~~~~~~"+ result.name + "~~~~~~~~"+ result.age + "~~~~~~~~"+ result.email;
$('#display').append('<li>'+ val+'</li>')
cursor.continue();
}
}
}
function addPublication() {
if (!db) {
return;
}
//點擊快了i相同就會報錯，ssn鍵值不能相同
var i = Date.parse(new Date()).toString().substr(0,10);
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
var req = store.add({ ssn: "8-88-88-"+i, name: "xiaohong"+i, age: 40, email: "xiaohong-"+i+"-@home.org" });
req.onsuccess = function (evt) {
displayPubList();
};
req.onerror = function() {
console.error("add error", this.error);
};
}
$(function(){
$('#get').click(function(){
displayPubList();
})
$('#add').click(function(){
addPublication();
})
$('#delete').click(function(evt) {
var k = '444-44-4444';
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
var req = store.get(k);
req.onsuccess = function(evt) {
var record = evt.target.result;
if (typeof record != 'undefined') {
req = store.delete(k);
}
displayPubList();
};
req.onerror = function (evt) {
console.error("delete:", evt.target.errorCode);
};
});
//更新數據
$('#updata').click(function(){
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
var req = store.get('555-55-5555');
req.onsuccess=function(e){
var student=e.target.result;
if(typeof record != 'undefined'){
student.age=26;
student.name="hanjinshan";
student.email="hanjinshan@home.org";
store.put(student);
}
displayPubList();
};
});
//刪除數據倉庫
$('#clear').click(function(){
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
store.clear();
displayPubList();
})
/*調用數據庫實例的deleteObjectStore方法可以刪除一個object store，這個就得在onupgradeneeded里面調用了
if(db.objectStoreNames.contains('students')){
db.deleteObjectStore('customers');
}*/
})
</script>