IndexedDB入门

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/654269.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！