Skip to content
On this page

前端捕获错误日志存储

利用 IndexDB 存储日志

日志存储

js
/**
 * 前端错误日志
 * 需要原生支持 IE
 */
function IDB (database) {
    this.database = database
    this.db;
    this._tables = {}
    this._queue = []

    this.getDB()
}

IDB.prototype.getDB = function (callback) {
    if (this.db) {
        callback && callback(this.db)
        return;
    }

    if (this.request) {
        if (callback) {
            this._queue.push(callback)
            return
        }
    }
    // 连接数据库
    _openDB.call(this, this.database);
}


IDB.prototype.table = function (table, config, db) {
    if (!this._tables[table]) {
        this._tables[table] = {
            name: table,
            table: new ITable(this, table),
            config: config
        }
    }
    return this._tables[table].table;
}

// 表操作
function ITable (IDB, table) {
    this.name = table
    this.IDB = IDB
}

// 增
ITable.prototype.add = function (data) {
    var that = this;
    this.IDB.getDB(function (db) {
        const store = db.transaction(that.name, 'readwrite')
            .objectStore(that.name);

        store.add(data);

        store.onsuccess = function (event) {
            console.log('add 写入成功')
        }

        store.onerror = function (event) {
            console.log('add 写入失败')
        }
    })
}

// 删
ITable.prototype.delete = function (id) {
    var that = this;
    this.IDB.getDB(function (db) {
        const store = db.transaction(that.name, 'readwrite')
            .objectStore(that.name);

        store.delete(id);

        store.onsuccess = function (event) {
            console.log('delete 写入成功')
        }

        store.onerror = function (event) {
            console.log('delete 写入失败')
        }
    })
}

// 改
ITable.prototype.put = function (data) {
    var that = this;
    this.IDB.getDB(function (db) {
        const store = db.transaction(that.name, 'readwrite')
            .objectStore(that.name);

        store.put(data);

        store.onsuccess = function (event) {
            console.log('add 写入成功')
        }

        store.onerror = function (event) {
            console.log('add 写入失败')
        }
    })
}

// 查
ITable.prototype.get = function (id, callback) {
    var that = this;
    this.IDB.getDB(function (db) {
        const store = db.transaction(that.name, 'readonly')
            .objectStore(that.name);

        var row = store.get(id);
        row.onsuccess = function (event) {
            console.log('get 成功')
            callback && callback(event.target.result)
        }

        row.onerror = function (event) {
            console.log('get 失败')
        }
    })
}



function _openDB () {
    var that = this;
    this.request = indexedDB.open(this.database);

    this.request.onupgradeneeded = function (event) {
        that.db = event.target.result;
        console.log('版本更新');
        var tables = that._tables;
        Object.getOwnPropertyNames(tables).forEach(function (key) {
            var table = tables[key];
            _updateStoreNames.call(that, that.db, table.name, table.config);
        });
    };

    this.request.onsuccess = function (event) {
        var result = that.request.result;
        console.log('数据库连接成功', that.db);

        if (!that.db) {
            that.db = result;
        }

        if (that._queue.length) {
            that._queue.forEach(function (fn) {
                fn(that.db)
            })
        }
    };

    this.request.onblocked = function (event) {
        console.log('数据库连接不通!')
    }

    this.request.onerror = function (event) {
        console.log('错误!');
    };
}

function _updateStoreNames (db, tabele, config) {
    if (!db.objectStoreNames.contains(tabele)) {
        db.createObjectStore(tabele, config);
    }
}

具体应用

js
var idb = new IDB('database')
var log = idb.table('log')

log.add()

log.delete

log.put

log.get

积硅步,至千里。

公众号码不停指,欢迎关注。