indexedDB入门使用--亲测可用

最新推荐文章于 2024-08-08 10:00:07 发布

前端老白

最新推荐文章于 2024-08-08 10:00:07 发布

阅读量176

点赞数

原文链接：https://www.cnblogs.com/cone/p/13818150.html

版权

转载于：https://www.cnblogs.com/cone/p/13818150.html
参考链接：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

1，HTML内容

<html>
    <head>
         <meta charset="utf-8"></meta>
         <title>IndexedDb测试</title>
         <script src="./index.js"></script>
     </head>
     <body>
     </body>
</html>

2，js内容

 const DATABASE_NAME = "test_db";
 const VERSION = 1;
 const TABLE = "test_table";

 /**
  * 在 [db]--[tableName]中新增一条记录[data]
  */
 function addRecord(db, tableName, data) {
     return new Promise(function (resolve, reject) {
         let request = db.transaction(tableName, "readwrite")
             .objectStore(tableName)
             .add(data);
         request.onsuccess = function () {
             resolve({
                 code: 10000
             });
         }
         request.onerror = function (e) {
             reject({
                 code: 0,
                 msg: e.target.error
             })
         }
     })
 }

 /**
  * 获取 [db]--[tableName]下，主键为 [key] 的某条记录
  */
 function getRecord(db, tableName, key) {
     return new Promise(function (resolve, reject) {
         let request = db.transaction(tableName)
             .objectStore(tableName)
             .get(key);
         request.onsuccess = function (e) {
             resolve({
                 code: 10000,
                 data: e.target.result
             });
         }
         request.onerror = function (e) {
             reject({
                 code: 0,
                 msg: e.target.error
             })
         }
     })
 }

 /**
  * 根据索引所在位置 [_index]，获取 [db]--[tableName]下，索引值为 [identify]的某条记录
  */
 function getRecordWithIndex(db, tableName, _index, identify) {
     return new Promise(function (resolve, reject) {
         let request = db.transaction(tableName, "readwrite")
             .objectStore(tableName)
             .index(_index)
             .get(identify);
         request.onsuccess = function (e) {
             resolve({
                 code: 10000,
                 data: e.target.result
             });
         }
         request.onerror = function (e) {
             reject({
                 code: 0,
                 msg: e.target.error
             })
         }
     })
 }

 /**
  * 读取 [db]--[tableName] 下的所有记录
  */
 function readAllRecord(db, tableName) {
     return new Promise(function (resolve, reject) {
         let objectStore = db.transaction(tableName).objectStore(tableName);
         let records = [];
         objectStore.openCursor().onsuccess = function (e) {
             let cursor = e.target.result;
             if (cursor) {
                 records.push(cursor.value);
                 cursor.continue();
             } else {
                 resolve({
                     code: 10000,
                     data: records
                 })
             }
         }
         objectStore.openCursor().onerror = function (e) {
             reject({
                 code: 0,
                 msg: e.target.error
             })
         }
     })
 }

 /**
  * 将 [db]--[tableName]中，主键为 [key]的数据为，更新为 [data]
  */
 function updateRecord(db, tableName, data, key) {
     return new Promise(function (resolve, reject) {
         let request = db.transaction(tableName, "readwrite")
             .objectStore(tableName)
             .put(data, key);
         request.onsuccess = function () {
             resolve({
                 code: 10000
             })
         }
         request.onerror = function (e) {
             reject({
                 code: 0,
                 msg: e.target.error
             })
         }
     })
 }

 /**
  * 在 [db]--[tableName]下，删除主键为[key]的记录
  */
 function deleteRecord(db, tableName, key) {
     return new Promise(function (resolve, reject) {
         let request = db.transaction(tableName, "readwrite")
             .objectStore(tableName)
             .delete(key);
         request.onsuccess = function () {
             resolve({
                 code: 10000
             });
         }
         request.onerror = function (e) {
             reject({
                 code: 0,
                 msg: e.target.error
             })
         }
     })
 }

 /**
  * 获取数据库对象
  */
 function getDB(dbName, version) {
     return new Promise(function (resolve, reject) {
         let request = window.indexedDB.open(dbName, version);
         request.onsuccess = function (e) {
             let db = e.target.result;
             resolve(db);
         }
         request.onupgradeneeded = function (e) {
             // 初始化数据库
             let db = e.target.result;
             if (!db.objectStoreNames.contains(TABLE)) {
                 var objectStore = db.createObjectStore(TABLE, {
                     autoIncrement: true
                 });
                 // 创建索引
                 objectStore.createIndex("name", "name", {
                     unique: true
                 });
                 objectStore.createIndex("email", "email", {
                     unique: true
                 });
             };
        }
     })
 }

 getDB(DATABASE_NAME, VERSION).then(db => {
     let data = {
         id: Math.random()*9999,
         name: "张三",
         age: 18,
         email: "test@168.com"
     }

     addRecord(db, TABLE, data).then(res => {
         console.log(res);
     }, err => {
         console.log(err);
     })

     // getRecord(db, TABLE, 1).then(res => {
     //     console.log(res);
     // }, err => {
     //     console.log(err);
     // })

     // getRecordWithIndex(db, TABLE, "email", "test@168.com").then(res => {
     //     console.log(res);
     // }, err => {
     //     console.log(err);
     // })

     // deleteRecord(db, TABLE, 1).then(res => {
     //     console.log(res);
     // }, err => {
     //     console.log(err);
     // })

     // readAllRecord(db, TABLE).then(res => {
     //     console.log(res);
     // }, err => {
     //     console.log(err);
     // })

     // updateRecord(db, TABLE, {id: 1, name: "小张三", age: 18, email: "new@168.com"}, 1).then(res => {
     //     console.log(res);
     // }, err => {
     //     console.log(err);
     // })
 })