Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

全栈开发小学生
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Html5

  • JavaScript

    • javascript常用操作
    • 安利一个网页调试开发利器vConsole
    • 各地图平台间的坐标转换
    • Viewer.js图片查看器
    • IndexedDB的增删改查的封装
    • axios常用操作
    • 前端使用js-cookie用来操作cookie
    • Symbol基本使用
    • 高德地图常用操作
    • 使用qrcodejs2生成显示二维码
    • 常用Jquery插件
    • pushjs浏览器通知插件
  • Nodejs

  • express

  • electron

  • Android

  • 微信公众号

  • 框架

  • 其他

  • selenium

  • Sequelize

  • 大前端
  • JavaScript
mrcdh
2023-05-24

IndexedDB的增删改查的封装

封装

class IndexedDB {
  constructor(database, version, storeName) {
    this.database = database
    this.version = version
    this.storeName = storeName
    this.db = null
  }

  open() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.database, this.version)

      request.onerror = (e) => {
        reject(e.target.error)
      }

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

      request.onupgradeneeded = (e) => {
        const db = e.target.result
        db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true })
      }
    })
  }

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

  add(entity) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite')
      const store = transaction.objectStore(this.storeName)
      const request = store.add(entity)

      request.onsuccess = (e) => {
        resolve({ ...entity, id: e.target.result })
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  update(entity) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite')
      const store = transaction.objectStore(this.storeName)
      const request = store.put(entity)

      request.onsuccess = () => {
        resolve(entity)
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  delete(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite')
      const store = transaction.objectStore(this.storeName)
      const request = store.delete(id)

      request.onsuccess = () => {
        resolve()
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  getById(id) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly')
      const store = transaction.objectStore(this.storeName)
      const request = store.get(id)

      request.onsuccess = (e) => {
        resolve(e.target.result)
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }

  getAll() {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly')
      const store = transaction.objectStore(this.storeName)
      const request = store.getAll()

      request.onsuccess = (e) => {
        resolve(e.target.result)
      }

      request.onerror = (e) => {
        reject(e.target.error)
      }
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

使用

const db = new IndexedDB('databaseName', 1, 'storeName')

db.open().then(() => {
  // 添加数据
  db.add({ name: 'John', age: 24 }).then((entity) => {
    console.log('添加成功', entity)
  }).catch((error) => {
    console.error('添加失败', error)
  })

  // 更新数据
  db.update({ id: 1, name: 'John', age: 25 }).then((entity) => {
    console.log('更新成功', entity)
  }).catch((error) => {
    console.error('更新失败', error)
  })

  // 删除数据
  db.delete(1).then(() => {
    console.log('删除成功')
  }).catch((error) => {
    console.error('删除失败', error)
  })

  // 根据 ID 获取数据
  db.getById(1).then((entity) => {
    console.log('获取成功', entity)
  }).catch((error) => {
    console.error('获取失败', error)
  })

  // 获取所有数据
  db.getAll().then((entities) => {
    console.log('获取成功', entities)
  }).catch((error) => {
    console.error('获取失败', error)
  })
}).finally(() => {
  db.close()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

需要注意的是,在使用 IndexedDB 时,我们需要保证每次操作都是在一个事务内完成的。如代码中所示,我们使用 transaction 和 objectStore 对象来进行事务和数据仓库的操作。每次操作都需要开启一个事务,在事务完成后及时关闭,以避免资源浪费。

#javascript
上次更新: 2023/09/22, 16:54:32
Viewer.js图片查看器
axios常用操作

← Viewer.js图片查看器 axios常用操作→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×