indexDB的使用

阵雨丶

已于 2022-09-16 17:25:00 修改

阅读量9k

点赞数 15

分类专栏： JavaScript 文章标签： indexDB

于 2021-07-16 16:17:48 首次发布

本文链接：https://blog.csdn.net/yuyuking/article/details/118762576

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

简介

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。IndexedDB 为生成 Web Application 提供了丰富的查询能力，使我们的应用在在线和离线时都可以正常工作。

无法开启indexDb的情况

浏览器不希望允许某些广告网络或恶意网站来污染你的计算机，所以浏览器会在任意给定的 web app 首次尝试打开一个 IndexedDB 存储时对用户进行提醒。用户可以选择允许访问或者拒绝访问。
IndexedDB 在浏览器的隐私模式（Firefox 的 Private Browsing 模式和 Chrome 的 Incognito 模式）下是被完全禁止的。

开始使用

打开数据库

首先要判断浏览器是否支持支持indexDb，之后在打开，并生成错误处理函数

let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!indexedDB) {
    console.log("浏览器不支持indexedDB");
}
// 打开我们的数据库,使用open方法
let request = indexedDB.open("MyTestDatabase");
// 错误处理，onerror函数
request.onerror = function (event) {
    console.log("error", event);
};

为该数据库创建一个对象仓库

假设我们需要存储用户信息，信息格式为{id:1,name:"张三",email:"1@qq.com"}。那么我们吧仓库命名为"userInfo"
当你创建一个新的数据库或者增加已存在的数据库的版本号， onupgradeneeded 事件会被触发

// 接上面的代码
request.onupgradeneeded = function (event) {
    var db = event.target.result;
    // 为该数据库创建一个对象仓库，创建一个名为“userInfo”的仓库，并指定id作为键路径(keyPath)
    var objectStore = db.createObjectStore("userInfo", {keyPath: "id"});
    // 建立一个索引来通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引
    objectStore.createIndex("name", "name", {unique: false});
    // 使用邮箱建立索引，我们向确保客户的邮箱不会重复，所以我们使用 unique 索引
    objectStore.createIndex("email", "email", {unique: true});
};

createObjectStore(name, options)函数接收两个参数，第一个参数为仓库的名字，第二个参数是个对象，是可选参数，其中包括以下的属性：

keyPath：指定键路径，需要唯一，可以不指定
autoIncrement：boolean类型，键生成器，是否自动生成，默认false

createIndex(name,keypath,options)接受三个参数
name：索引的名称，可为空
keypath：索引对应的keyPath
options：可选，参数为：

unique：boolean类型，如果为 true，则索引将不允许单个键的重复值。
multiEntry：boolean类型，如果true，则当keyPath解析为数组时，索引将在每个数组元素的索引中添加一个条目。如果 false，它将添加一个包含数组的条目。
locale：目前仅限 Firefox (43+)，为索引指定语言环境

新增数据

上面已经创建好数据库和表了，数据库名：MyTestDatabase，表名：userInfo，浏览器打开F12，Application->IndexDB即可看到，接下来我们为表中增加100条数据。
首先我们先自己造100条数据：

let arr = [];
for (let i = 0; i < 100; i++) {
    arr.push({
        id: i,
        name: "张" + i,
        email: i + "@qq.com"
    });
}

之后新增到userInfo表中：

request.onsuccess = function (event) {
    db = event.target.result;
    var transaction = db.transaction(["userInfo"], "readwrite");
    var objectStore = transaction.objectStore("userInfo");
    for (let i of arr) {
        objectStore.add(i);
    }
};

transaction(storeNames, mode, options)表示一个事务。在数据库上创建一个事务，指定作用域（例如要访问的存储对象），并确定所需的访问类型（只读或读写）。接收三个参数：
storeNames：字符串数组，对象库名称，如果只有一个，也可以写字符串不写数组
mode：字符串，可选参数。readonly和readwrite，默认为readonly，表示只读，readwrite表示可以写入。除此之外还有个只用于Firefox的“readwriteflush”，目前实验性的。
options：可选参数，durability: “default”, “strict”, 或 “relaxed”。默认值为"default"。"relaxed"提供了更好的性能，"relaxed"用于临时数据。

objectStore()表示允许访问通过主键查找的 IndexedDB 数据库中的一组数据的对象存储区。为了方便理解，可以把“对象存储空间”想象成关系数据库的“表”结构，下文也会把对象存储空间称为表。

查找数据

可以使用get方法查找到某一条数据

request.onsuccess = function (event) {
    db = event.target.result;
    var transaction = db.transaction(["userInfo"]);
    var objectStore = transaction.objectStore("userInfo");
    let men1 = objectStore.get(2);
    men1.onsuccess = function (e) {
        var data = e.target.result;
        console.log(data);
    };
};

使用索引查询

有时候我们并不能确定用户的id，只能通过其他方式去查找，比如我们想查找邮箱为"5@qq.com"的用户，这时候就需要用到索引。
使用索引之前必须确定已经设置了索引，在创建表的时候，我们通过 objectStore.createIndex("email", "email", {unique: true});设置了email的索引

request.onsuccess = function (event) {
    db = event.target.result;
    var transaction = db.transaction(["userInfo"]);
    var objectStore = transaction.objectStore("userInfo");
    let men1 = objectStore.index("email");
    // 查找邮箱为‘5@qq.com’的用户
    men1.get('5@qq.com').onsuccess = function (e) {
        var data = e.target.result;
        console.log(data);
    };
};

index()方法参考objectStore方法一览

使用游标查询

游标的使用方法：

request.onsuccess = function (event) {
    db = event.target.result;
    var transaction = db.transaction(["userInfo"]);
    var objectStore = transaction.objectStore("userInfo");
    let men1 = objectStore.openCursor();
    men1.onsuccess = function (e) {
        var data = e.target.result;
        if (data) {
            console.log(data.value);
            data.continue(); // 使游标下移
        } else {
            console.log("No more entries!");
        }
    };
};

如果我们要查询id 5-9的数据，不包含5，但包含9

    let men1 = objectStore.openCursor(IDBKeyRange.bound(5,9,true, false));
    let list=[]
    men1.onsuccess = function (e) {
        var data = e.target.result;
        if (data) {
            list.push(data.value)
            data.continue(); // 使游标下移
        } else {
            console.log("No more entries!");
        }
        console.log(list); // 打印出id是6 7 8 9的数据
    };

修改数据

使用get方法找到数据并指定为“readwrite”进行修改

request.onsuccess = function (event) {
    db = event.target.result;
    var transaction = db.transaction(["userInfo"], "readwrite");
    var objectStore = transaction.objectStore("userInfo");
    let men1 = objectStore.get(1);
    men1.onsuccess = function (e) {
        // 获取我们想要更新的数据
        var data = e.target.result;
        data.name="张三2"
        console.log(data)
        objectStore.put(data)
    };
};

删除数据

通过delete方法删除

request.onsuccess = function (event) {
    db = event.target.result;
    var transaction = db.transaction(["userInfo"], "readwrite");
    var objectStore = transaction.objectStore("userInfo");
    let men1 = objectStore.delete(1);
    men1.onsuccess = function (e) {
        console.log("删除成功")
        console.log( e)
    };
};

objectStore方法一览：

方法名	参数	作用
add(value,key)	value:被存储的值.key:标识某条记录的键，如果不指定，它会被设为null	添加一条数据。
clear()		清除表
count(key)	key:键或键范围（key range	计算符合条件的对象的数量
createIndex(name,keyPath,optional)	详见上方为该数据库创建一个对象仓库*	创建并返回新的IDBIndex对象，该方法只能从versionchange事务模式的回调方法中被调用
delete(key)	key:标识记录的键或键范围	从表中删除数据
deleteIndex(indexName)	indexName:要删除的现有索引的名称	删除索引，该方法只能在VersionChange监听函数里面调用。
get(key)	key:键或键范围	从表中检索请求的记录(只返回一条)
index(name)	name:要打开的索引的名称	打开此表中的命名索引
openCursor(range,direction)	range:用作游标范围的键范围。如果此参数未指定或为空，则该范围包括对象存储中的所有记录。direction:游标的方向，包括：“next”（显示所有记录，包括重复记录，从下往上移动），“nextunique”（显示所有记录，不包括重复项，从下往上移动），“prev”（显示所有记录，包括重复记录，从上往下移动），“prevunique”（显示所有记录，不包括重复记录，从上往下移动）	获取一个指针对象
openKeyCursor(range, direction)	同上	获取一个主键指针对象
put(value,key)	value:新数据,key:主键，可为空	更新某个主键对应的数据记录，如果对应的键值不存在，则插入一条新的记录
getKey(key)	key:主键值或 IDBKeyRange 对象	获取主键
getAll(query, count)	query:键或IDBKeyRange,可选，count:返回值的数量,可选	获取对象仓库的记录
getAllKeys(query, coun)	同上	获取所有符合条件的主键

简单封装

原生的indexDB语法比较繁琐，把上面的代码稍微封装一下，方便调用

let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

class DB {
    constructor(name, version, options) {
        this._dbs = {};
        this._databaseName = name;
        this.currentStore = "";
        this.open(name, version, options);
    }

    open(name, version, options) {
        if (!indexedDB) {
            console.error("浏览器不支持indexedDB");
            return;
        }
        return new Promise((resolve, reject) => {
            if (this._dbs && this._dbs[name]) {
                resolve(this._dbs[name]);
                return;
            }
            let request = indexedDB.open(name, version);
            request.onupgradeneeded = (event) => {
                let db = event.target.result;
                this._dbs[name] = db;
                for (let i in options) {
                    // 判断是否存在表
                    if (!db.objectStoreNames.contains(options[i].storeName)) {
                        var objectStore = db.createObjectStore(options[i].storeName, options[i].option);
                        for (let j of options[i].index) {
                            objectStore.createIndex(j.name, j.keyPath, {unique: j.unique});
                        }
                    }
                }
                resolve(db);
            };
            request.onsuccess = (event) => {
                // IDBDatabase
                const db = event.target.result;
                // 缓存起来
                this._dbs[name] = db;
                resolve(db);
            };
            request.onerror = (event) => {
                reject(event);
                console.error('IndexedDB', event);
            };
        });
    }

    async _getTransaction(storeName, version) {
        let db;
        // 先从缓存获取
        if (this._dbs[this._databaseName]) {
            db = this._dbs[this._databaseName];
        } else {
            db = await this.open(this._databaseName, version);
        }
        return db.transaction([storeName], 'readwrite');
    }

    async _getObjectStore(storeName, version) {
        let transaction = await this._getTransaction(storeName, version);
        return transaction.objectStore(storeName);
    }

    // 获取一个store
    collection(storeName, version) {
        this.currentStore = storeName;
        this._getObjectStore(storeName, version);
        return this;
    }

    add(data) {
        return new Promise((resolve, reject) => {
            this._getObjectStore(this.currentStore).then((objectStore) => {
                const request = objectStore.add(data);
                request.onsuccess = function (event) {
                    resolve(event.target.result);
                };
                request.onerror = (event) => {
                    reject(event);
                };
            });
        });
    }

    get(data) {
        return new Promise((resolve, reject) => {
            this._getObjectStore(this.currentStore).then((objectStore) => {
                const request = objectStore.get(data);
                request.onsuccess = function (event) {
                    resolve(event.target.result);
                };
                request.onerror = (event) => {
                    reject(event);
                };
            });
        });
    }

    delete(data) {
        return new Promise((resolve, reject) => {
            this._getObjectStore(this.currentStore).then((objectStore) => {
                const request = objectStore.delete(data);
                request.onsuccess = function (event) {
                    resolve(event.target.result);
                };
                request.onerror = (event) => {
                    reject(event);
                };
            });
        });
    }

    clear(data) {
        return new Promise((resolve, reject) => {
            this._getObjectStore(this.currentStore).then((objectStore) => {
                const request = objectStore.clear(data);
                request.onsuccess = function (event) {
                    resolve(event.target.result);
                };
                request.onerror = (event) => {
                    reject(event);
                };
            });
        });
    }

    put(data) {
        return new Promise((resolve, reject) => {
            this._getObjectStore(this.currentStore).then((objectStore) => {
                const request = objectStore.put(data);
                request.onsuccess = function (event) {
                    resolve(event.target.result);
                };
                request.onerror = (event) => {
                    reject(event);
                };
            });
        });
    }

    find(start,end,startInclude,endInclude){
        return new Promise((resolve, reject) => {
            this._getObjectStore(this.currentStore).then((objectStore) => {
                const request = objectStore.openCursor(IDBKeyRange.bound(start,end,startInclude, endInclude));
                request.onsuccess = function (event) {
                    resolve(event.target.result);
                };
                request.onerror = (event) => {
                    reject(event);
                };
            });
        });

    }

	// 还可以根据自己需求继续写
}

使用方法：

    let data = [];
    for (let i = 0; i < 100; i++) {
        data.push({
            id: i,
            name: "张" + i,
            email: i + "@qq.com"
        });
    }
    let option = [
        {
            storeName: "test1",
            option: {
                keyPath: "id"
            },
            index: [{
                name: 'id', keyPath: "id", unique: true
            }, {
                name: 'name', keyPath: "name", unique: false
            }, {
                name: 'emial', keyPath: "emial", unique: true
            }]
        }
    ];
    let db = new DB("myTest", "1", option);
    const store = db.collection('test1',"1");
    store.add(data[0]);
    store.get(data[0].id).then((result) => {
        console.log(result);
    });
    store.add(data[1]);
    store.add(data[2]);
    store.delete(data[0].id)

indexDB库

在实际开发中我们可能更倾向于使用现成的轮子，比如

dexie.js：IndexedDB 的包装，通过简单的语法，可以更快地进行代码开发。缺点是官方文档只有英文的
IndexDBWrapper：有中文文档，对indexDB的简单封装，方法较少

大家可以根据实际需求选择自己封装还是直接使用现成的库。

阵雨丶

关注

15
点赞
踩
56

收藏

觉得还不错? 一键收藏
3
评论
indexDB的使用

目录简介无法开启indexDb的情况开始使用打开数据库为该数据库创建一个对象仓库新增数据查找数据使用索引查询使用游标查询修改数据删除数据简介IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。IndexedDB 为生成 Web Application 提供了丰富的查询能力，使我们的应用在在线和离线时都可以正常工作。无法开启indexDb的情况浏览器不希望允许某些广告网络或恶意网站来污染你的计算机，所以浏览器会在任意给定的 web app 首次尝试打开一个 IndexedDB 存
复制链接

扫一扫