html5 indexdb 存储插件

最新推荐文章于 2025-04-24 13:33:47 发布

processengine

最新推荐文章于 2025-04-24 13:33:47 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： indexDB 浏览器数据库浏览器数据存储

本文链接：https://blog.youkuaiyun.com/processengine/article/details/81509861

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种浏览器本地存储解决方案，通过封装复杂的原生IndexDB操作，提供了一个简单易用的Driver类。该类支持数据库操作如打开、创建表、插入、选择、更新和删除数据等，适用于大量数据存储场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

indexDB

浏览器本地存储，使用indexDB
当少量数据存储可以使用localStorage满足要求Storage操作
当数据量更大时localStorage存储操作影响性能，这时候可以使用indexDB，原生indexDB使用复杂度较高，因此对常用的操作做了个封装，更方便操作
项目地址

API

constructor(name, version?)

name: 数据库名字
version: 数据库版本 默认1
eg: var driver = new Driver('database')

Driver.prototype.open

打开数据库连接 返回promise对象 在resolve中可以创建表或者删除表 
driver.open().then(() => {
    driver.createTable({
        name: 'table',
        primaryKey: 'key',
        indexes: [
            {name: 'name_index', column: 'key', unique: true},
        ],
    })
})

Driver.prototype.insert(table, data)

table: 表名
data: 需要插入的数据 obj or array
eg: driver.insert({key: 'key', name: '', ...})

Driver.prototype.select(table, keyRange?, limit?)

table: 表名
keyRange: KeyRange 包含多种比较操作
limit: 取出记录数
eg: driver.select('table', keyRange.eq('key'), 1).then(rs => console.log(rs))

Driver.prototype.selectByKey(table, key)

table:表名
key: 主键
eg: driver.selectByKey('key').then(rs => console.log(rs))

Driver.prototype. count (table, keyRange?)

根据条件统计记录数
table: 表名
keyRange: @see select
eg: driver.count('table').then(size => console.log(size))

Driver.prototype. update (table, modify, where?)

 数据更新，如果数据不存在则新增
 table: 表名
 modify: 修改的对象
 where：条件
 eg: driver.update('table', {name: 'xxxx'}, {key: 'key'})

Driver.prototype.delete (table, key)

table: 表名
key: 主键
根据主键删除
eg: driver.delete('table', 'key')

Driver.prototype.truncate(table)

清空某张表
table：表名

示例

const driver = new Driver('pallet', 1);
driver.on("process", function (state) {
    console.log(state)
})
driver.open().then(function () {
    var arrPlayers = []
    for(let i=0; i<100; i++) {
        arrPlayers.push({
            name: `韩梅梅${i}`,
            sex: `女${i}`
        })
    }
    driver.createTable({
        name: 'player',
        primaryKey: 'id',
        autoIncrement: true,
        indexes: [
          {name: 'name_index', column: 'name', unique: true},
        ],
        data : arrPlayers
    })
})

function select(){
    driver.select('player').then(rs => console.log(rs))
}

function insert(){
    driver.insert('player', {name:'xxx', sex: 'qqq'})
}

function update(){
    driver.update('player', {name:'xxx', sex: 'qqq'}, {key: 2})
}

function delete(){
    driver.delete('player', 2)
}

function truncate(){
    driver.truncate('player')
}