html5 --- > IDBDatabase创建对象存储和索引
代码如下:
<!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