magiccube-vue3/package/utils/mopai-indexedbd.js

vue3-js版组件库

class MopaiIndexedDB {
    constructor(option, cb) {
        this.db = null
        this.dbName = option.dbName
        this.version = option.version || 1
        this.storeName = option.storeName
        this.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB
    }

    async open(){
        if (this.indexedDB) {
            return await this._init()
        } else {
            console.error('[mopai-db]', '浏览器不支持indexedDB数据库')
        }
    }

    _init() {
        return new Promise((resolve, reject) => {
            const _request = indexedDB.open(this.dbName, this.version)

            _request.onerror = e => {
                console.error('[mopai-db]', e.target.errorCode)
                reject()
            }

            _request.onsuccess = e => {
                this.db = e.target.result
                resolve(this.db)
            }

            _request.onupgradeneeded = e => {
                this.db = e.target.result
                if (!this.db.objectStoreNames.contains(this.storeName)) {
                    this.db.createObjectStore(this.storeName, { keyPath: 'key' })
                }
            }
        })
    }

    _searchData(objectStore, key) {
        return new Promise((resolve, reject) => {
            const search = objectStore.get(key)
            search.onsuccess = e => {
                resolve(e)
            }

            search.onerror = err => {
                reject(err)
            }
        })
    }

    _addData(objectStore, data) {
        return new Promise((resolve, reject) => {
            const res = objectStore.add(data)
            res.onsuccess = e => resolve(e)
            res.onerror = err => resolve(err)
        })
    }

    _updateData(objectStore, data) {
        return new Promise((resolve, reject) => {
            const res = objectStore.put(data)
            res.onsuccess = e => resolve(e)
            res.onerror = err => resolve(err)
        })
    }

    set(key, data) {
        if (!this.db) return
        return new Promise((resolve, reject) => {
            const transaction = this.db.transaction([this.storeName], 'readwrite')
            const objectStore = transaction.objectStore(this.storeName)
            this._searchData(objectStore, key).then(() => {
                return this._updateData(objectStore, { t: Date.now(), key, data })
            }, () => {
                return this._addData(objectStore, { t: Date.now(), key, data })
            }).then(() => {
                resolve('success')
            }, err => {
                console.error('[mopai-db]', err)
                reject(err)
            })
        })
    }

    get(key) {
        return new Promise((resolve, reject) => {
            const transaction = this.db.transaction([this.storeName], 'readwrite')
            const objectStore = transaction.objectStore(this.storeName)
            this._searchData(objectStore, key).then((event) => {
                resolve(event.target.result)
            }, err => {
                reject(err)
            })
        })
    }

    close() {
        this.db?.close?.()
    }

    deleteDB() {
        const deleteRequest = this.indexedDB?.deleteDatabase?.(this.dbName);
        deleteRequest.onerror = (evt) => {
            console.error('[mopai-db]', '删除失败');
        };
        deleteRequest.onsuccess = (evt) => {
            console.info('[mopai-db]', '删除成功');
        };
    }
}

export default MopaiIndexedDB