因为最近做了个存前端的项目,没有后端支持的,又想要实现增删改查的效果,所以就用浏览器的indexddb这个存储库,但是直接用indexddb的api又好像不是很友好,所以就用了这个jsstore库,因为封装的很像sql语句。

相关知识

  1. jsstore文档
  2. IndexedDB API - Web APIs | MDN
  3. 浏览器数据库IndexedDB入门教程-阮一峰

安装

$ npm i jsstore -S $ npm i worker-loader -D

使用案例(封装的代码在下面)

import db from './db.js' //引入下面的代码 // 初始化数据库(数据库名称, 表(必须要在创建的时候添加表)) 如果存在则打开 db.initDB('db', [{name: 'product', columns: [{name: 'id',primaryKey: true,autoIncrement: true}, {name: 'name',notNull: true,dataType: JsStore.DATA_TYPE.String}, {name: 'price',notNull: true,dataType: JsStore.DATA_TYPE.Number}, {name: 'quantity',notNull: true,dataType: JsStore.DATA_TYPE.Number}]}]) // 插入单条数据 db.add('product', {name: 'banana', price: 22, quantity: 1000}) // 插入多条数据 db.add('product', [{name: 'banana', price: 22, quantity: 1000}, {name: 'apple', price: 10, quantity: 2000}]) // 删除单条数据(表名, 删除条件(如果传Number(id)或者是[Number, Number]则默认id作为删除条件)) db.remove('product', 1) // 删除多条数据 db.remove('product', [1, 2]) // 带条件删除数据 db.remove('product', {name: 'apple'}) //删除name=apple的产品 // 更新数据(表名, 更新数据, 更新条件(如果不传则默认从数据里面取出id作为更新条件)) db.update('product', {name: 'banana', price: 22, quantity: 1000, id: 1}) //更新id 为 1的数据 // 带条件更新数据 db.update('product', {price: {'+': 5}}, {name: 'apple'}) //更新name=apple的price全部加5 // 查询数据(表名, 查询条件, 其他(比如 排序(order by), 分组(group by)等等)) db.select('product', {name: 'apple'}, {limit: 10, order: {by: 'id', type: 'desc'}}) // 查找出name=apple 降序排序的前10条数据 db.select('product', null, {limit: 10, order: {by: 'id', type: 'desc'}}) // 查降序排序的前10条数据 // 分页查询数据(表名, 分页条件(page(页码默认1), limit(一次查询多少条数据默认15)), sql函数) // 分页数据结构的数据说明: {totalCount(总数据条数): 20, totalPage(总页数): 2, page(当前页码): 1, limit(每次查询多少条数据): 10} db.page('product', {page: 1, limit: 10}) // 带条件的分页查询 db.page('product', {page: 1}, {name: 'apple'}) // 查询name=apple的分页结构数据

封装的代码

/* eslint import/no-webpack-loader-syntax: off */ //如果用了eslint 就加上这句 import * as JsStore from 'jsstore' const Worker = require('worker-loader?publicPath=/&name=jsstore.worker.js!jsstore/dist/jsstore.worker.min') class DB { constructor () { this.connent = null } /** * 初始化数据库 * @param {String} name 数据库名字默认为db * @param {Array} tables 数据库的表 * @return {Promise} true已存在这个数据库 false不存在这个数据库 */ async initDB (name = 'db', tables = []) { let connent = new JsStore.Instance(new Worker()) let isExist = await connent.isDbExist(name) if (isExist) { connent.openDb(name) } else { connent.createDb({name, tables: tables }) } this.connent = connent return isExist } /** * 插入数据到数据表 * @param {String} table 表名称 required * @param {Array | Object} data 插入的数据 required * @return {Promise} 成功返回刚插入的数据用Array包装 */ async add (table, data) { data = data instanceof Array ? data : [data] if (!this.connent) { await this.initDB() } this.connent.insert({ into: table, values: data }) return data } /** * 更新数据表的数据 * @param {String} table 表名称 required * @param {Object} data 更新表的数据 required * @param {Object | null} where 更新表的额外条件如果不传默认使用data['id']作为更新条件 * @return {Promise} 成功返回刚更新的数据 */ async update (table, data = {}, where) { if (!this.connent) { await this.initDB() } where = where || {id: data['id']} this.connent.update({ in: table, set: data, where: where }) return data } /** * 删除数据表数据 * @param {String} table 表名称 required * @param {Number | Array(Number,Number) | Object} data 删除数据的条件,如果传Number&Array则以id为条件 required * @return {Promise} */ async remove (table, data) { if (!this.connent) await this.initDB() let where = {} if (typeof data === 'number') { where['id'] = data } else if (data instanceof Array) { where['id'] = {in: data} } else { where = data } this.connent.remove({ from: table, where: where }) return true } /** * 查询数据表数据 * @param {String} table 表名称 required * @param {Object | null} where 查询条件 * @param {Object} other 查询函数比如: limit、order by、group by * @return {Promise} 成功返回查询出来的数据 */ async select (table, where = null, other = {}) { if (!this.connent) await this.initDB() let res = await this.connent.select({ from: table, where, ...other }) return res } /** * 自定义分页函数 * @param {String} table 表名称 required * @param {Object} where 查询条件一定要有这两个参数{limit: 15, page: 1} required * @param {Object} other 查询函数比如: limit、order by、group by * @return {Promise} 成功返回{totalCount(总数据条数): 20, totalPage(总页数): 2, page(当前页码): 1, limit(每次查询多少条数据): 10, data(数据): [{},{}]} */ async page (table, where = {limit: 15, page: 1}, other = {}) { if (!this.connent) await this.initDB() let limit = where.limit let page = where.page delete where.limit delete where.page if (JSON.stringify(where) === '{}') { where = null } let skip = (page - 1) * limit let baseOther = {} baseOther['order'] = { by: 'id', type: 'desc' } other = {...baseOther, ...other, skip, limit} let obj = {} obj['data'] = await this.connent.select({from: table, ...other, where}) obj['totalCount'] = await this.connent.count({from: table, where}) obj['totalPage'] = Math.ceil(obj['totalCount'] / limit) obj['page'] = Number(page) return obj } } export default new DB()

以上就是我封装的类,那些查询基本都可以和文档各种函数相结合,如果不行,咱们评论区见!!!