indexedDB封装(增删改查)_uncaught (in promise) domexception: failed to exec

作者：笔触狂放9 | 2024-03-08 02:44:03

踩

uncaught (in promise) domexception: failed to execute 'put' on 'idbobjectsto

封装indexedDB

 (function () {
     var dbObj = {};
     /**
      * 打开数据库
      */
     dbObj.init = function (param) {
         this.dbName = param.dbName;
         this.dbVersion = param.dbVersion;
         this.dbStoreName = param.dbStoreName;
         if (!window.indexedDB) {
             alert('浏览器不支持indexedDB')
         }
         var request = indexedDB.open(this.dbName, this.dbVersion);
         // 打开数据库失败
         request.onerror = function (event) {
             console.log('数据库打开失败,错误码：', event)
         }
         // 打开数据库成功
         request.onsuccess = function (event) {
             // 获取数据对象
             dbObj.db = event.target.result;
             console.log('连接数据库成功');
         }

         // if (this.db.objectStoreNames.contains(dbObj.dbStoreName)) {
         //     console.log('数据仓库已存在');
         // }
         // 创建数据库
         request.onupgradeneeded = function (event) {
             dbObj.db = event.target.result;
             dbObj.db.createObjectStore(dbObj.dbStoreName, {
                //  keyPath: "id", //设置主键 设置了内联主键就不可以使用put的第二个参数(这里是个坑)
                 autoIncrement: true // 自增
             });
         }
     }

     dbObj.getStore = function (dbStoreName, mode) {
         // 获取事务对象 
         var ts = dbObj.db.transaction(dbStoreName, mode);
         // 通过事务对象去获取对象仓库
         return ts.objectStore(dbStoreName);
     }
     /**
      * 添加和修改数据
      */
     dbObj.put = function (msg, key) {
         var store = this.getStore(dbObj.dbStoreName, 'readwrite')
         var request = store.put(msg, key);
         request.onsuccess = function () {
             if (key) 
                 console.log('修改成功');
             else 
                 console.log('添加成功');
         };
         request.onerror = function (event) {
             console.log(event);
         }
     }
     /**
      * 删除数据
      */
     dbObj.delete = function (id) {
         var store = this.getStore(dbObj.dbStoreName, 'readwrite')
         var request = store.delete(id);
         request.onsuccess = function () {
             alert('删除成功');
         }

     }
     /**
      * 查询数据
      */
     dbObj.select = function (key) {
         var store = this.getStore(dbObj.dbStoreName, 'readwrite')
         if (key)
             var request = store.get(key);
         else
             var request = store.getAll();
         request.onsuccess = function () {
             console.log(request.result);
         }
     }
     /**
      * 删除表
      */
     dbObj.clear = function () {
         var store = this.getStore(dbObj.dbStoreName, 'readwrite')
         var request = store.clear();
         request.onsuccess = function () {
             alert('清除成功');
         }
     };
     window.dbObj = dbObj;
 })()
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

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>indexedDB</title>
    <script src="./indexedDB.js"></script>
    <script>
        window.onload = function () {

            var btn = document.getElementsByTagName('button');
            // 创建数据库
            btn[0].onclick = function () {
                var dbParams = {
                    dbName: 'User',
                    dbVersion: '1.0',
                    dbStoreName: 'Student'
                }
                dbObj.init(dbParams);
                console.log(dbObj)
            }
            // 添加数据
            btn[1].onclick = function () {
                dbObj.put({
                    name: 'zhangsan',
                    age: 12
                })
            }
            // 修改数据
            btn[2].onclick = function () {
                dbObj.put({
                    name: 'zhangsan221',
                    age: 15
                },2)
            }
            // 查询数据
            btn[3].onclick = function () {
                dbObj.select()
            }
            // 删除数据
            btn[4].onclick = function () {
                dbObj.delete(1)
            }
            // 删库跑路
            btn[5].onclick = function () {
                dbObj.clear()
            }
        }
    </script>
</head>

<body>
    <button>创建对象仓库</button>
    <button>添加数据</button>
    <button>修改数据</button>
    <button>查询数据</button>
    <button>删除数据</button>
    <button>删除数据仓库</button>
</body>

</html>
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

如果设置了内联主键使用put第二个参数

Uncaught DOMException: Failed to execute ‘put’ on ‘IDBObjectStore’: The object store uses in-line keys and the key parameter was provided.
在这里插入图片描述
所以要么不设置内联主键要么设置不使用put第二个参数

添加

在这里插入图片描述

删除

在这里插入图片描述

修改

在这里插入图片描述

查找

在这里插入图片描述

清空

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/208760