https://www.cnblogs.com/zhangzuwei/p/16574791.html
注意
1.删除表，创建表只能在数据库版本升级里面进行。
2.keyPath: key 要和表字段对应，而且格式要一样，不然不运行不报错。
3.使用 autoIncrement: true 代替 keyPath: key， 则不需要写关键字段。
<html>
<head>
<title>IndexedDB</title>
<style>
h1 { text-align:center; }
table { margin:auto; border-collapse:collapse; }
th, td { text-align:center; padding:10px; border:1px solid black; }
</style>
</head>
<body>
<h1>Customers</h1>
<p id="msg"></p>
<table id="table"></table>
<script>
if (!window.indexedDB) {msg.innerText = "Your browser doesn't support IndexedDB.";
} else {const customerData = [{ name: "Bill", age: 35, email: "bill@company.com" },{ name: "Donna", age: 32, email: "donna@home.org" },{ name: "Jenny", age: 23, email: "jenny@msn.com" },{ name: "Henry", age: 43, email: "Henry@outlook.com" },{ name: "Kaili", age: 53, email: "Kaili@outlook.com" }];var db;var request = window.indexedDB.open("MyTestDatabase", 1);request.onerror = function(event) {console.log(event);msg.innerText = event.target.error;};request.onupgradeneeded = function(event){db = event.target.result;if (db.objectStoreNames.contains('customers')){db.deleteObjectStore("customers");}var objectStore = db.createObjectStore("customers", { autoIncrement: true });objectStore.createIndex("name", "name", { unique: false });objectStore.createIndex("email", "email", { unique: true }); objectStore.transaction.oncomplete = function(event){var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");customerData.forEach(function(customer){customerObjectStore.add(customer); });};};request.onsuccess = function(event){ var i = 1;var tr = document.createElement('tr');var th = document.createElement('th');th.textContent = 'id';tr.append(th);th = document.createElement('th');th.textContent = 'name';tr.append(th);th = document.createElement('th');th.textContent = 'age';tr.append(th);th = document.createElement('th');th.textContent = 'email';tr.append(th);table.append(tr);db = event.target.result;var objectStore = db.transaction("customers").objectStore("customers"); objectStore.openCursor().onsuccess = function(event){var cursor = event.target.result; if (cursor) {tr = document.createElement('tr');var td = document.createElement('td');td.textContent = i;tr.append(td);td = document.createElement('td');td.textContent = cursor.value.name;tr.append(td);td = document.createElement('td');td.textContent = cursor.value.age;tr.append(td);td = document.createElement('td');td.textContent = cursor.value.email;tr.append(td);table.append(tr);cursor.continue(); i++;} else {console.log("No more cursor!");}};}; }
</script>
</body>
</html>
