HTML5 使用瀏覽器內置資料庫之 indexedDB
indexedDB是H5規範里的瀏覽器內置資料庫，是nosql資料庫的一種。因為另一種資料庫Web SQL不再受W3C支援，所以還得學習下這個。
基本情況
- 兼容性：ie11及以上都支援，
- W3C是這麼說的
- 調試的時候個人覺得firefox最方便
示例程式碼
html程式碼：
<form>
userId:<input type="text" name="uid" id="uId"/><br/>
userName:<input type="text" name="uname" id="uName"/><br/>
email:<input type="email" name="uemail" id="uEmail"/><br/> <br/>
<input type="button" value="Add" id="addBut"/>
<input type="button" value="Delete" id="delBut"/>
<input type="button" value="Update" id="updateBut"/>
<input type="button" value="Search" id="searBut"/>
</form>
<hr/>
<button id='showAll'>Show All</button>
<table width="60%">
<tr>
<td width="10%">uid</td>
<td width="20%">uname</td>
<td width="30%">uemail</td>
</tr>
</table>
<table class="desc" width="60%">
</table>
js程式碼：
<script src="//apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
//判斷瀏覽器是否支援indexedDB
window.indexedDB = window.indexedDB || window.mozIndexedDB
|| window.webkitIndexedDB || window.msIndexedDB;
if (window.indexedDB) { //如果支援
console.log("支援");
//創建請求打開資料庫，不能直接打開。demoDB是資料庫名；3是版本號。
var request = window.indexedDB.open('demoDB', 3);
var db;
//onupgradeneeded事件:第一次打開頁面初始化資料庫時，或在當有版本號變化時調用。
request.onupgradeneeded = function (event) {
db = event.target.result;
//創建一個存儲，名稱為user
var objectStore = db.createObjectStore('user', {keyPath:'uid'});
// 創建一個email索引。不能有相同的 email 地址，所以使用一個 unique 索引。
objectStore.createIndex("uemail", "uemail", {unique:true});
console.log('運行onupgradeneeded... :)');
};
//成功回調
request.onsuccess = function (event) {
db = event.target.result;
console.log('創建(請求)資料庫成功 :)');
};
//失敗回調
request.onerror = function (event) {
console.log('創建(請求)資料庫出錯 :(', event);
};
} else {//如果不支援
console.log('The browser does not support indexedDB :)')
}
//增
$('#addBut').click(function () {
var uidVal = $('#uId').val();
var unameVal = $('#uName').val();
var emailVal = $('#uEmail').val();
//首先需要創建一個事務，具有讀寫許可權。在indexedDB里任何的存取對象的操作都需要放在事務里執行
var transaction = db.transaction(['user'], 'readwrite');
var objectStore = transaction.objectStore('user').add({uid:uidVal, uname:unameVal, uemail:emailVal});
transaction.oncomplete = function (event) {
console.log('新記錄增加成功 :)');
};
transaction.onerror = function (event) {
console.log('新記錄增加出錯 :(', event);
}
});
//刪
$('#delBut').click(function () {
var uidVal = $('#uId').val();
var request = db.transaction(['user'], 'readwrite').objectStore('user').delete(uidVal);
request.onsuccess = function (event) {
console.log('數據刪除成功 :)');
};
request.onerror = function (event) {
console.log('刪除出錯 :(', event);
//console.log('刪除出錯 :(',event.target.errorCode);
};
});
//改
$('#updateBut').click(function () {
var uidVal = $('#uId').val();
var unameVal = $('#uName').val();
var emailVal = $('#uEmail').val();
var request = db.transaction(['user'], 'readwrite').objectStore('user').put({
uid:uidVal,
uname:unameVal,
uemail:emailVal
});
request.onsuccess = function (event) {
console.log('修改成功 :)');
};
request.onerror = function (event) {
console.log('修改出錯 :(');
}
});
//查
$('#searBut').click(function () {
var uidVal = $('#uId').val();
var transaction = db.transaction(['user'], 'readwrite');
var objectStore = transaction.objectStore('user').get(uidVal);
objectStore.onsuccess = function (event) {
$('#uName').val(objectStore.result.uname);
$('#uEmail').val(objectStore.result.uemail);
console.log('查詢成功 :)');
};
objectStore.onerror = function (event) {
console.log('查詢出錯 :(', event.target.errorCode);
}
});
//查 取出所有數據
$('#showAll').click(function () {
var str = '';
var transaction = db.transaction(['user']);
var objectStore = transaction.objectStore('user');
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
str += '<tr><td with="10%">' + cursor.key + '</td><td with="20%">' + cursor.value.uname + '</td><td with="30%">' + cursor.value.uemail + '</td></tr>';
$('.desc').html(str);
cursor.continue();
} else {
// console.log('No more datas... :(');
}
}
});
});
</script>
