代碼如下:
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> CRUD操作 </title><style type="text/css">table{width: 830px;border: 1px solid lightgrey;border-collapse: collapse;vertical-align: top;}td{padding: 5px;border:1px solid lightgrey;}tr{background: linear-gradient(to right, #f6f6f6, #fff);}tr:hover{background: linear-gradient(to right, #eee, #f6f6f6);}tbody{text-align:center;}</style>
</head>
<body><form id="bookForm">ISBN: <input id="isbn" name="isbn" type="text" size="40" />書名: <input id="name" name="name" type="text" size="40" /> <p>作者: <input id="author" name="author" type="text" size="40" />價格: <input id="price" name="price" type="number" min="10" max="200" step="0.1" /><p>內容簡介: <input id="content" name="content" type="text" size="80" /><p><button onclick="add();" type="button">添加</button> <p>ISBN下限: <input id="isbnlower" name="isbnlower" type="text" size="30" />ISBN上限: <input id="isbnupper" name="isbnupper" type="text" size="30" /><button onclick="query();" type="button">查詢</button></form> <table><tr><th width="5%">ISBN</th><th>書名</th><th>內容簡介</th><th width="6%">作者</th><th width="6%">價格</th><th width="7%">操作</th></tr><tbody id="bookTb"></tbody></table><script type="text/javascript">function createDb(event){idb = event.target.result;var storeName="books";if(idb.objectStoreNames.contains(storeName)){idb.deleteObjectStore(storeName);}var opt ={keyPath: "isbn",autoIncrement: false};var store = idb.createObjectStore(storeName, opt);store.createIndex("by_name","name", {unique: true});store.createIndex("by_content", "content");store.createIndex("by_author", "author");store.createIndex("by_price", "price");}var dbName="fkDb";var version = 2;function add(){var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;var tx = idb.transaction("books", "readwrite");var booksStore = tx.objectStore("books");var book = {isbn: document.querySelector("#isbn").value,name: document.querySelector("#name").value,content: document.querySelector("#content").value,author: document.querySelector("#author").value,price: parseFloat(document.querySelector("#price").value),}var objectStoreRequest = booksStore.add(book);objectStoreRequest.onsuccess = function(event){alert("數據添加成功!");document.querySelector("#bookForm").reset();list();};}request.onerror = function(event){alert("數據庫打開失敗!");}request.onupgradeneeded = createDb;}function list(){var dbName = "fkDb";var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;// 針對books對象存儲的只讀事務var tx = idb.transaction("books", "readonly");var booksStore = tx.objectStore("books");// 獲取全部圖書var objectGetRequest = booksStore.getAll();objectGetRequest.onsuccess = function(event){var bookTb = document.querySelector("#bookTb");bookTb.innerHTML = "";var books = objectGetRequest.result;for(var i = 0; i < books.length; i ++){var row = bookTb.insertRow(i);var j = 0;for( var prop in books[i]){var cell = row.insertCell(j++);cell.innerHTML = books[i][prop];}var opCell = row.insertCell(5);opCell.innerHTML = "<button onclick='delBook(\"" +books[i]['isbn'] + "\");'>刪除</button>";}};}request.onerror = function(event){alert("數據庫打開失敗!" + event);}request.onupgradeneeded = createDb;}function delBook(key){var dbName = "fkDb";var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;var tx = idb.transaction("books", "readwrite");var booksStore = tx.objectStore("books");var objectDeleteRequest = booksStore.delete(key);objectDeleteRequest.onsuccess = function(event){alert("圖書刪除成功!");list();};}request.onerror = function(event){alert("數據庫打開失敗!" + event);}request.onupgradeneeded = createDb;}function query(){var dbName = "fkDb";var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;var tx = idb.transaction("books", "readonly");var booksStore = tx.objectStore("books");var range = IDBKeyRange.bound(document.querySelector("#isbnlower").value,document.querySelector("#isbnupper").value);var objectQueryRequest = booksStore.openCursor(range);var bookTb = document.querySelector("#bookTb");bookTb.innerHTML = "";objectQueryRequest.onsuccess = function(event){var cursor = objectQueryRequest.result;if(cursor){var row = bookTb.insertRow(0);var j = 0;for(var prop in cursor.value){var cell = row.insertCell(j++);cell.innerHTML = cursor.value[prop];}var opCell = row.insertCell(5);opCell.innerHTML = "<button onclick='delBook(\"" +cursor.value['isbn'] + "\");'>刪除</button>";cursor.continue();}};}request.onerror = function(event){alert("數據庫打開失敗!" + event);}request.onupgradeneeded = createDb;}list();</script>
</body>
</html>
效果如下:
打開控制臺可以看見在IndexedDB里面創建了一個名為"fkDB"的數據庫,里面有個books
參考《瘋狂H5+CSS3+JS講義》(第2版)P545~P559
)
)
