在前端风风雨雨的混了多年，从没在项目中实际使用过 IndexedDB 这个浏览器端的数据库，所以今天就摸了下 MDN 的后门，写一个简单的入门示例。
页面大概长这样：
源码：
以下代码包含了一个数据库所有的 CRUD （增删改查）操作。
html
<div>
<button id="js_add_btn">添加书籍</button>
</div>
<div>
<input type="text" name="" id="js_book_id" placeholder="输入书籍ID"/>
<button id="js_get_by_id_btn">查询书籍</button>
<button id="js_update_by_id_btn">更新书籍</button>
<button id="js_delete_by_id_btn">删除书籍</button>
</div>
<div>
<input type="text" name="" id="js_book_author" placeholder="输入书籍作者查询"/><button id="js_get_by_author_btn">查询书籍</button>
</div>
<div>
<button id="js_get_all_btn">查询所有书籍</button>
</div>
<div id="output"></div>
<script>
(() => {
// 数据库配置
const dbName = 'MyDB';
const storeName = 'books';
const output = document.getElementById('output')
let db = null;
function setOutputContent(html) {
output.innerText = html;
}
// 初始化数据库
const initDB = () => {
const request = indexedDB.open(dbName);
// 数据库升级/创建时触发
request.onupgradeneeded = (event) => {
db = event.target.result;
// 创建对象存储空间（类似数据库表）
const store = db.createObjectStore(storeName, {
keyPath: 'id', // 主键
autoIncrement: true, // 自动生成ID
});
// 创建索引（允许通过作者查询）
store.createIndex('author_idx', 'author', { unique: false });
console.log('数据库已创建/升级');
};
// 数据库打开成功
request.onsuccess = (event) => {
db = event.target.result;
console.log('数据库已打开');
};
// 数据库打开失败
request.onerror = (event) => {
console.error('数据库错误:', event.target.error);
setOutputContent('数据库错误');
};
};
// 封装包装函数，用于执行数据库相关方法
function wrapper(func) {
return new Promise((resolve, reject) => {
const transaction = db.transaction([storeName], 'readwrite');
const store = transaction.objectStore(storeName);
const res = func(store)
res.onsuccess = () => {
resolve(res.result)
};
res.onerror = (event) => {
reject(event.target.error)
};
});
}
// 添加数据
const addBook = async (book) => {
try {
const result = await wrapper((store) => store.add(book))
console.log(result);
setOutputContent(`添加成功！书籍ID: ${result}`);
} catch (error) {
console.error(error);
setOutputContent('添加失败');
}
};
// 通过ID查询数据
const getBook = async (id) => {
try {
const book = await wrapper((store) => store.get(id))
if (book) {
console.log('查询结果:', book);
setOutputContent(`书名: ${book.title}\n作者: ${book.author}\n价格: $${book.price}`);
} else {
console.log('未找到书籍');
setOutputContent('未找到该书籍');
}
} catch (error) {
console.error(error);
setOutputContent('查询失败');
}
};
// 查询全部数据
const getAllBook = async () => {
try {
const book = await wrapper((store) => store.getAll())
if (book) {
console.log('查询结果:', book);
setOutputContent(`总数：${book.length}`);
} else {
console.log('未找到书籍');
setOutputContent('未找到该书籍');
}
} catch (error) {
console.error(error);
setOutputContent('查询失败');
}
};
// 更新数据--数据不存在时会添加数据
const updateBook = async (book) => {
try {
const result = await wrapper((store) => store.put(book))
console.log(result);
setOutputContent(`更新成功！结果: ${result}`);
} catch (error) {
console.error(error);
setOutputContent('更新失败');
}
};
// 删除数据
const deleteBook = async (id) => {
try {
const result = await wrapper((store) => store.delete(id))
console.log(result);
setOutputContent(`删除成功！结果: ${result}`);
} catch (error) {
console.error(error);
setOutputContent('删除失败');
}
};
// 根据作者查询
const getByAuthor = async (author) => {
try {
const result = await wrapper((store) => {
const index = store.index("author_idx");
const request = index.getAll(author);
return request;
})
console.log(result);
setOutputContent(`查询成功！结果: ${JSON.stringify(result)}`);
} catch (error) {
console.error(error);
setOutputContent('查询失败');
}
};
// 添加书籍
document.getElementById('js_add_btn').onclick = () => {
addBook({
title: 'Web前端入门',
author: '前端路引',
price: (0.99 * Math.random() + 10) .toFixed(2),
});
};
// 根据ID查询
document.getElementById('js_get_by_id_btn').onclick = () => {
const bookId = document.getElementById('js_book_id').value;
getBook(Number(bookId));
};
// 根据ID删除
document.getElementById('js_delete_by_id_btn').onclick = () => {
const bookId = document.getElementById('js_book_id').value;
deleteBook(Number(bookId));
};
// 根据ID更新
document.getElementById('js_update_by_id_btn').onclick = () => {
const bookId = document.getElementById('js_book_id').value;
updateBook({
// 主键ID
id: Number(bookId),
title: 'Web前端入门',
author: '公众号：前端路引',
price: (0.99 * Math.random() + 10) .toFixed(2),
});
};
// 根据作者查询
document.getElementById('js_get_by_author_btn').onclick = () => {
const author = document.getElementById('js_book_author').value
getByAuthor(author);
};
// 查询全部
document.getElementById('js_get_all_btn').onclick = () => {
getAllBook();
};
// 页面加载时初始化数据库
initDB();
})();
</script>IndexedDB 大小限制
以下内容为 AI 回答：
获取可用的存储空间大小
js
navigator.storage.estimate().then((estimate) => {
console.log(
`已使用：`,
(
(estimate.usage / estimate.quota) * 100
).toFixed(2)
);
console.log(`可使用：`, (estimate.quota / 1024 / 1024).toFixed(2) + "MB");
});相关文档：https://developer.mozilla.org/en-US/docs/Web/API/Storage_API
写在最后
由于项目中很少使用，所以这 API 给不了太多建议~~
此 API 的应用场景还是有的，可以想想下那些超大文件在线处理应用，比如 ZIP、PSD、PPT 之类的文件，可以将文件解析后存在 IndexedDB 中，在需要的时候查询指定数据即可，这样可以节约很多的解析时间。
只是需要注意，所有存在浏览器端的数据，用户清空缓存之后都将不复存在，所以在使用时需做好容错处理~~
详细文档请参阅 MDN：https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
一个更加完善的项目：https://github.com/marco-c/eLibri