前端捕获错误日志存储
利用 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
积硅步,至千里。
公众号码不停指,欢迎关注。