一个简单的 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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix