indexDB 本地数据库

indexDB 本地数据库

IndexedDB是一种使用浏览器存储大量数据的方法，它创造的数据可以被查询，并且可以离线使用。

优点：空间大小，大于250M；支持二进制：IndexedDB不但可以存储对象，字符串等，还可以存储二进制数据（文件对象）。

一、indexDB 实现方法

操作包括：创建数据库和创建表、插入数据、根据主键查询数据、根据游标查询所有数据、通过索引查询数据、通过索引和游标查询多条匹配的数据、通过主键删除数据、通过游标和索引删除指定的多条数据、关闭数据库。

//打开数据库(数据库名，和版本号为1)
function openDB(dbName, version) {
 
    //返回一个 promise对象，为了实现异步传输（创建promise对象后就会立即执行）
    return new Promise((resolve, reject) => {
        //兼容浏览器
        var indexedDB =
            window.indexedDB ||
            window.mozIndexedDB ||
            window.webkitIndexedDB ||
            window.msIndexedDB;
        let db;

        //打开数据库，若没有就创建
        const request = indexedDB.open(dbName, version);

        //调用数据库打开或创建成功回调函数()
        request.onsuccess = function (event) {
            //获取 数据库对象,里面有很多方法（增删改查）
            db = event.target.result;
            console.log('数据库打开成功！');
            //返回数据库对象
            resolve(db)
        };

        //创建或打开数据库失败回调函数
        request.onerror = function (event) {
        
            console.log("数据库打开错误");
            console.log(event)
        };


       //数据库更新回调函数
       request.onupgradeneeded = function (event) {
        //数据库创建或升级时触发
        console.log("")
        //获取数据库对象
        db = event.target.result;
        //创建存储库(存储库名称，对象)-创建表（users表）
        ObjectStore = db.createObjectStore('userupfile', {
            //主键,必须唯一
            keyPath: "fileID"
            //autoIncrement: true   //实现自增加
        });

        //创建索引，在后面查询数据的时候可以根据索引查-创建字段（字段名，索引名，是否唯一：true）
        //可以通过索引来查询
        ObjectStore.createIndex('fileID', 'fileID', { unique: true });
        ObjectStore.createIndex('fileObject', 'fileObject', { unique: false });

    }

    })
}



//插入数据(数据库对象，表名，插入的数据通常为对象)
 function addData(db, storeName, data) {
    var request = db
        // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
        .transaction([storeName], "readwrite")
        // 仓库对象
        .objectStore(storeName)
        .add(data);

    //成功回调函数
    request.onsuccess = function (event) {
        console.log("数据写入成功");
    };

    //失败回调函数
    request.onerror = function (event) {
        console.log("数据写入失败");
    };
}



//通过主键查询数据（数据库对象，表名，主键值）
 function getDataByKey(db, storeName, key) {
    return new Promise((resolve, reject) => {
        var transaction = db.transaction([storeName]); // 事务
        var objectStore = transaction.objectStore(storeName); // 仓库对象
        var request = objectStore.get(key); // 通过主键获取的查询数据

        //失败回调函数   
        request.onerror = function (event) {
            console.log("事务失败");
        };

        //查询成功回调函数
        request.onsuccess = function (event) {
            // console.log("主键查询结果: ", request.result);
            //返回值对应的值
            resolve(request.result);
        };
    });
}





//通过游标查询所有数据（数据库对象，表名）

function cursorGetData(db, storeName) {
    let list = [];
    var store = db
        .transaction(storeName, "readwrite") // 事务
        .objectStore(storeName); // 仓库对象

    //初始化了一个游标对象（指针对象）
    var request = store.openCursor();

    //成功回调函数， 游标开启成功，逐行读数据
    request.onsuccess = function (e) {
        var cursor = e.target.result;
        if (cursor) {

            // 将查询值添加到列表中（游标.value=获取值）
            list.push(cursor.value);
            cursor.continue(); // 遍历了存储对象中的所有内容
        } else {

            console.log("游标读取的数据：", list);
            //返回数据
            resolve(list);

        }
    };
}



//通过索引查询,查询满足相等条件的第一条数据（数据库对象，表名，索引名字，索引值）

 function getDataByIndex(db, storeName, indexName, indexValue) {
    //通过Promise实现异步回调
    return new Promise((resolve, reject) => {
        var store = db.transaction(storeName, "readwrite").objectStore(storeName);
        var request = store.index(indexName).get(indexValue);
        //查询失败回调函数
        request.onerror = function () {
            console.log("查询失败");
        };
        //查询成功回调函数
        request.onsuccess = function (e) {
            var result = e.target.result;
            console.log(typeof (result));
            //返回成功查询数据
            resolve(result)
        }

    });
}



//通过索引和游标查询多条匹配的数据（数据库对象，表名，索引名，索引值）
 function cursorGetDataByIndex(db, storeName, indexName, indexValue) {

    return new Promise((resolve, reject) => {

        let list = [];
        var store = db.transaction(storeName, "readwrite").objectStore(storeName); // 仓库对象
        var request = store
            .index(indexName) // 索引对象
            .openCursor(IDBKeyRange.only(indexValue)); // 指针对象
        request.onsuccess = function (e) {
            var cursor = e.target.result;
            if (cursor) {
                // 必须要检查
                list.push(cursor.value);
                cursor.continue(); // 遍历了存储对象中的所有内容
            } else {
                // console.log("游标索引查询结果：", list);
                resolve(list)
            }
        };
        request.onerror = function (e) { };

    })

}


//通过提供的主键值来更新数据，如果主键值不存在，就添加数据（数据库对象，表名，新的数据值）
 function updateDB(db, storeName, data) {
    return new Promise((resolve, reject) => {
        alert('err')

        var request = db
            .transaction([storeName], "readwrite") // 事务对象
            .objectStore(storeName) // 仓库对象
            .put(data);

        request.onsuccess = function () {
            // console.log("数据更新成功");
            resolve('数据更新成功')
        };

        request.onerror = function () {
            // console.log("数据更新失败");
            reject('数据更新失败')
        };

    })
}


//通过主键删除数据（数据库对象，表名，主键值）
 function deleteDB(db, storeName, id) {
    return new Promise((resolve,reject)=>{

        var request = db
      .transaction([storeName], "readwrite")
      .objectStore(storeName)
      .delete(id);
  
    request.onsuccess = function () {
    //   console.log("数据删除成功");
    resolve('删除成功！')
    };
  
    request.onerror = function () {
    //   console.log("数据删除失败");
    reject('删除失败')
    };
    })
    
  }


  //通过游标和索引删除指定的多条数据（数据库对象，表名，索引名，索引值）

 function cursorDelete(db, storeName, indexName, indexValue) {
    return new Promise((resolve,reject)=>{
        var store = db.transaction(storeName, "readwrite").objectStore(storeName);
        var request = store
          .index(indexName) // 索引对象
          .openCursor(IDBKeyRange.only(indexValue)); // 指针对象
        request.onsuccess = function (e) {
          var cursor = e.target.result;
          var deleteRequest;
          if (cursor) {
            deleteRequest = cursor.delete(); // 请求删除当前项
            deleteRequest.onerror = function () {
            //   console.log("游标删除该记录失败");
            resolve('删除失败！')

            };
            deleteRequest.onsuccess = function () {
            //   console.log("游标删除该记录成功");
            reject('删除成功！')

            };
            cursor.continue();
          }
        };
        request.onerror = function (e) {};

    })

  }


//关闭数据库
function closeDB(db) {
    return new Promise((resolve,reject)=>{
        db.close();
        resolve('数据库已关闭')
    })
   
  }

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

二、调用实现方法

直接在html文件中引入对应上面的JS文件，调用里面的方法，传入对应的参数即可

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    
    <script   src="./indexDB.js">script>
head>

<body>
    <script>

        //通过链式的方式调用Promise对象
        openDB('userTT',1).then((db) => {
    
            console.log(db)

            // 插入数据
              let data={
                fileID:String(new Date()),
                fileObject:"33"   
              }
            addData(db,'userupfile',data)

            // 通过id查询数据
            getDataByKey(db,'users', 'Fri Nov 25 2022 20:04:23 GMT+0800 (中国标准时间)').then((re)=>{
                console.log(re)
            })


            // 通过游标查询所有数据
            cursorGetData(db,'users').then((re)=>{
                console.log(re)
            })


          //  关闭数据库
           closeDB(db).then((res)=>{
            console.log(res);
           })

          //  ......

        });

    script>

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

实践运用中保存的数据示意图

本图为，我自己在实践项目中的保存的数据，并非上面代码实现的效果（数据库名、表名、及其保存数据都有不同）