一个简单的 indexedDB 应用示例
现代浏览器中会包含 indexedDB，这是一个功能比 localStorage 更加强大的数据库引擎，其 API 描述详见 W3规范：IndexedDB
如下是一个简单的应用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js"></script>
<title>IndexedDB BookStore</title>
</head>
<body>
<button onclick="addBook()">Add a book</button>
<button onclick="clearBooks()">Clear books</button>
<p>Books list:</p>
<ul id="listElem"></ul>
<script>
let db
init()
async function init() {
// 这里的 idb 就是 'https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js' 生成的
// indexedDB 的别名
db = await idb.openDb('booksDb', 1, (db) => {
db.createObjectStore('books', { keyPath: 'name' })
})
list()
}
async function list() {
let tx = db.transaction('books')
let bookStore = tx.objectStore('books')
let books = await bookStore.getAll()
if (books.length) {
listElem.innerHTML = books
.map(
(book) => `<li>
name: ${book.name}, price: ${book.price}
</li>`
)
.join('')
} else {
listElem.innerHTML = '<li>No books yet. Please add books.</li>'
}
}
async function clearBooks() {
let tx = db.transaction('books', 'readwrite')
await tx.objectStore('books').clear()
await list()
}
async function addBook() {
let name = prompt('Book name?')
let price = +prompt('Book price?')
let tx = db.transaction('books', 'readwrite')
try {
await tx.objectStore('books').add({ name, price })
await list()
} catch (err) {
if (err.name == 'ConstraintError') {
alert('Such book exists already')
await addBook()
} else {
throw err
}
}
}
window.addEventListener('unhandledrejection', (event) => {
alert('Error: ' + event.reason.message)
})
</script>
</body>
</html>
