APP开发从0到1|初识IndexedDB【增，查】中 IndexedDB|前端数据库|Nosql|nosql数

文章目录

一，前言
二，IndexedDB的增
三，IndexedDB的查
- 贴一下JS方法

一，前言 【APP开发从0到1|初识IndexedDB【增，查】中】其实IndexedDB的应用比较广泛。就以某视频网站为例吧。

文章图片

可以看到，IndexedDB数据库的使用是非常广泛的。
二，IndexedDB的增我们在html文件里加入script标签

let db; openDB("class",1).then((db) => { db=db; console.log(db); // 插入数据 let data = https://www.it610.com/article/{ uuid:Math.round(Math.random()*100), neme:"上进小菜猪", class:"计算机", number:"2067111119" } addData(db,'users', data);

文章图片

我们再增加一条、

文章图片

因为我们设置的主键不能重复，所以刷新，不会增加，我们现在把主键改为随机数：

uuid:Math.round(Math.random()*100),

刷新若干次：

文章图片

观察，主键变了，后面的值不变。
三，IndexedDB的查 IndexedDB的查的方式比较多样化。

//通过主键查询数据 getDataByKey(db,'users',9); //通过游标查询数据 cursorGetData(db,'users'); //通过索引查询数据 getDataByIndex(db,'users','class',"计算机"); //通过索引和游标查询记录 cursorGetDataByIndex(db,'users','class',"计算机"); //通过索引和游标分页查询记录 cursorGetDataByIndexAndPage( db, 'users', 'name', '张三', 1, 10 );

我们直接来看效果图吧。

文章图片

贴一下JS方法

//插入数据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) { // 必须要检查 list.push(cursor.value); cursor.continue(); // 遍历了存储对象中的所有内容 } else { console.log("游标读取的数据：", list); } }; }//通过索引读取数据 function getDataByIndex(db, storeName, indexName, indexValue) { 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("索引查询结果：", result); }; }// 通过索引和游标查询记录 function cursorGetDataByIndex(db, storeName, indexName, indexValue) { 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); } }; request.onerror = function (e) {}; }//通过索引和游标分页查询记录 function cursorGetDataByIndexAndPage( db, storeName, indexName, indexValue, page, pageSize ) { let list = []; let counter = 0; // 计数器 let advanced = true; // 是否跳过多少条查询 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 (page > 1 && advanced) { advanced = false; cursor.advance((page - 1) * pageSize); // 跳过多少条 return; } if (cursor) { // 必须要检查 list.push(cursor.value); counter++; if (counter < pageSize) { cursor.continue(); // 遍历了存储对象中的所有内容 } else { cursor = null; console.log("分页查询结果", list); } } else { console.log("分页查询结果", list); } }; request.onerror = function (e) {}; }