IndexedDB 介绍
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。
IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。
本文仅对 IndexedDB 的常用方法进行封装说明,可以帮助你快速实现一下功能:
- 打开 / 创建 Indexed 数据库
- 新增数据
- 通过主键读取数据
- 通过游标读取数据
- 通过索引读取数据
- 通过索引和游标查询记录
- 更新数据
- 删除数据
- 通过索引和游标删除指定的数据
- 关闭数据库
- 删除数据库
了解更多关于 IndexedDB,请前往阮一峰老师的IndexedDB入门教程
IndexedDB 基本封装
/**
* 打开数据库
* @param {object} dbName 数据库的名字
* @param {string} storeName 仓库名称
* @param {string} version 数据库的版本
* @return {object} 该函数会返回一个数据库实例
*/
export function handleOpenDB(dbName, storeName, version = 1) {
return new Promise((resolve, reject) => {
// 兼容浏览器
var indexedDB =
window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
let db;
const request = indexedDB.open(dbName, version);
request.onsuccess = function(event) {
db = event.target.result; // 数据库对象
console.log("数据库打开成功");
resolve(db);
};
request.onerror = function(event) {
console.log("数据库打开报错");
};
request.onupgradeneeded = function(event) {
// 数据库创建或升级的时候会触发
console.log("onupgradeneeded");
db = event.target.result; // 数据库对象
var objectStore;
if (!db.objectStoreNames.contains(storeName)) {
objectStore = db.createObjectStore(storeName, {
keyPath: "id" }); // 创建表
// objectStore = db.createObjectStore('person', { autoIncrement: true }) // 创建表
objectStore.createIndex("name", "name", {
unique: false }); // 创建索引 可以让你搜索任意字段
objectStore.createIndex("address", "address", {
unique: false });
objectStore.createIndex("nameAddr", ["name", "address"]