国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

IndexedDB 簡單封裝

Songlcy / 2181人閱讀

摘要:之前我在開發過程中使用的是,可以直接寫查詢數據。,用鍵值模式存儲數據,而且就是專門為小數量數據設計的。只能是字符串而且空間有限。下面是自己看了阮一峰的文章簡單的學習了下對這個瀏覽器數據庫有個大概的了解,下面是個人對簡單的封裝。

IndexedDB?瀏覽器數據庫,是一個非關系型數據庫,數據形式使用的是json,IndexedDB適合存儲大量數據,它的API是異步調用的,當然他的api?也相對復雜。

當然瀏覽器數據存儲 還有LocalStorage,Cookies,web SQL等 為什么還再來一個indexedDB。

之前我在開發過程中使用的是web sql,可以直接寫sql查詢數據。

LocalStorage,用key-value鍵值模式存儲數據,而且Localstorage就是專門為小數量數據設計的。

Cookies只能是字符串 而且空間有限。

如果你在實際應用中希望存儲大量數據時,IndexedDB會明顯的更適合,IndexedDB也能提供你更為復雜的查詢數據的方式,還能建立索引,他的索引還是挺666的。

下面是自己看了阮一峰的 文章 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

簡單的學習了下?IndexedDB 對這個瀏覽器數據庫有個大概的了解,下面是個人對IndexedDB 簡單的封裝。

?

const dbName = "test";
const dbVersion = 1;

export default {
  // indexedDB兼容
  indexedDB:
    window.indexedDB ||
    window.webkitindexedDB ||
    window.msIndexedDB ||
    window.mozIndexedDB,
  //name:表名  key:主鍵 ,cursorIndex 索引
  store: {
    teacher: {
      name: "teacher",
      key: "id",
      cursorIndex: [{ name: "teachNum", unique: false }]
    },
    student: {
      name: "student",
      key: "id",
      cursorIndex: [{ name: "stuNum", unique: false }]
    }
  },
  async initDB() {
    let that = this;
    let request = this.indexedDB.open(dbName, dbVersion);
    request.onerror = function() {
      console.log("打開數據庫失敗");
    };

    request.onsuccess = function() {
      console.log("打開數據庫成功");
    };
    request.onupgradeneeded = function(event) {
      let db = event.target.result;
      for (var t in that.store) {
        if (!db.objectStoreNames.contains(that.store[t].name)) {
          var objectStore = db.createObjectStore(that.store[t].name, {
            keyPath: that.store[t].key,
            autoIncrement: true
          });
          for (let i = 0; i < that.store[t].cursorIndex.length; i++) {
            const element = that.store[t].cursorIndex[i];
            objectStore.createIndex(element.name, element.name, {
              unique: element.unique
            });
          }
        }
      }
    };
  },
  // 打開數據庫
  openDB: function() {
    return new Promise((resolve, reject) => {
      let request = this.indexedDB.open(dbName, dbVersion);

      request.onerror = function(event) {
        reject("IndexedDB數據庫打開錯誤," + event);
      };
      request.onsuccess = function(event) {
        resolve(event.target.result);
      };
    });
  },
  // 刪除表
  deleteDB: function(table) {
    let deleteQuest = this.indexedDB.deleteDatabase(table);
    deleteQuest.onerror = function() {
      return Promise.resolve(false);
    };
    deleteQuest.onsuccess = function() {
      return Promise.resolve(true);
    };
  },
  // 關閉數據庫
  closeDB: async function(db) {
    try {
      let d;
      if (!db) {
        d = await this.openDB();
      }
      let closeQuest = d.closeDB();
      return new Promise(resolve => {
        closeQuest.onerror = function() {
          resolve(false);
        };
        closeQuest.onsuccess = function() {
          resolve(true);
        };
      });
    } catch (error) {
      return Promise.resolve(false);
    }
  },
  // 添加數據,add添加新值
  insert: async function(table, data) {
    try {
      let db = await this.openDB();
      let request = db
        .transaction(table.name, "readwrite")
        .objectStore(table.name)
        .add(data);

      return new Promise((resolve, reject) => {
        request.onerror = function() {
          reject("添加數據出錯");
        };
        request.onsuccess = function() {
          resolve(true);
        };
      });
    } catch (error) {
      console.log(error);
      return Promise.resolve(false);
    }
  },
  // 更新
  update: async function(table, data) {
    try {
      let db = await this.openDB();
      let request = db
        .transaction(table.name, "readwrite")
        .objectStore(table.name)
        .put(data);
      return new Promise(resolve => {
        request.onerror = function() {
          resolve(false);
        };
        request.onsuccess = function() {
          resolve(true);
        };
      });
    } catch (error) {
      return Promise.resolve(false);
    }
  },
  // 刪除數據
  delete: async function(table, keyValue) {
    try {
      let db = await this.openDB();
      let request = db
        .transaction(table.name, "readwrite")
        .objectStore(table.name)
        .delete(keyValue);
      return new Promise(resolve => {
        request.onerror = function() {
          resolve(false);
        };
        request.onsuccess = function() {
          resolve(true);
        };
      });
    } catch (error) {
      return Promise.resolve(false);
    }
  },
  // 清空數據
  clear: async function(table) {
    let db = await this.openDB();
    let store = db.transaction(table.name, "readwrite").objectStore(table.name);
    store.clear();
  },
  // 查詢數據 表名 索引值 索引 key  沒有value key為key 而不是索引
  get: async function(table, keyValue, indexCursor) {
    try {
      let db = await this.openDB();
      let store = db
        .transaction(table.name, "readonly")
        .objectStore(table.name);
      let request;
      request = !keyValue
        ? store.openCursor()
        : indexCursor
          ? store.index(indexCursor).get(keyValue)
          : store.get(keyValue);
      let data = [];
      return new Promise(resolve => {
        request.onerror = function() {
          resolve("查詢數據失敗");
        };
        request.onsuccess = function(event) {
          if (!keyValue && !indexCursor) {
            if (event.target.result) {
              data.push(event.target.result.value);
              event.target.result.continue();
            } else {
              resolve(data);
            }
          } else {
            resolve([event.target.result]);
          }
        };
      });
    } catch (error) {
      return Promise.reject(error);
    }
  },
  //   通過游標操作數據, callback中要有游標移動方式
  handleDataByCursor: async function(table, keyRange) {
    try {
      let kRange = keyRange || "";
      let db = await this.openDB();
      let store = db.transaction(table, "readwrite").objectStore(table),
        request;
      request = store.openCursor(kRange);
      return new Promise(resolve => {
        request.onerror = function() {
          resolve("通過游標獲取數據報錯");
        };
        request.onsuccess = function(event) {
          let cursor = event.target.result;
          resolve(cursor);
        };
      });
    } catch (error) {
      return Promise.reject(error);
    }
  },
  // 通過索引游標操作數據, callback中要有游標移動方式
  handleDataByIndex: async function(table, keyRange, sursorIndex) {
    try {
      let kRange = keyRange || "";
      let db = await this.openDB();
      let store = db.transaction(table, "readwrite").objectStore(table),
        request;
      request = store.index(sursorIndex).openCursor(kRange);
      return new Promise(resolve => {
        request.onerror = function() {
          resolve("通過索引游標獲取數據報錯");
        };
        request.onsuccess = function(event) {
          let cursor = event.target.result;
          if (cursor) {
            resolve(cursor);
          }
        };
      });
    } catch (error) {
      return Promise.reject(error);
    }
  },
  // 創建游標索引
  createCursorIndex: async function(table, cursorIndex, unique) {
    var db = await this.openDB();
    let store = db.transaction(table, "readwrite").objectStore(table);
    store.createIndex(cursorIndex, cursorIndex, {
      unique: unique
    });
    return Promise.resolve();
  }
};

?


此隨筆乃本人學習工作記錄,如有疑問歡迎在下面評論,轉載請標明出處。

如果對您有幫助請動動鼠標右下方給我來個贊,您的支持是我最大的動力。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1722.html

相關文章

  • 初探IndexedDB

    背景 隨著前端技術日新月異地快速發展,web應用功能和體驗也逐漸發展到可以和原生應用媲美的程度,前端緩存技術的應用對這起到了不可磨滅的貢獻,因此想一探前端的緩存技術,這篇文章主要會介紹在日常開發中比較少接觸的IndexedDB IndexedDB 什么是IndexedDB IndexedDB簡單理解就是前端數據庫,提供了一種在用戶瀏覽器中持久存儲數據的方法,但是和前端關系型數據不同的是,Index...

    jsyzchen 評論0 收藏0
  • 關于indexedDB的使用,以及一個簡單封裝

    摘要:因為寫起來簡潔,所以用寫法來作說明接口由提供,異步使用數據庫中的事件對象屬性。所有的讀取和寫入數據均在中完成。由發起,通過來設置的模式例如是否只讀或讀寫,以及通過來獲得一個。 //因為ES6寫起來簡潔,所以用ES6寫法來作說明 //IDBTransacation接口由IndexedDB API提供,異步transaction使用數據庫中的事件對象屬性。所有的讀取和寫入數據均在trans...

    Rindia 評論0 收藏0
  • 關于indexedDB的使用,以及一個簡單封裝

    摘要:因為寫起來簡潔,所以用寫法來作說明接口由提供,異步使用數據庫中的事件對象屬性。所有的讀取和寫入數據均在中完成。由發起,通過來設置的模式例如是否只讀或讀寫,以及通過來獲得一個。 //因為ES6寫起來簡潔,所以用ES6寫法來作說明 //IDBTransacation接口由IndexedDB API提供,異步transaction使用數據庫中的事件對象屬性。所有的讀取和寫入數據均在trans...

    Alliot 評論0 收藏0
  • indexedDB事務功能的Promise化封裝(二)——利用generator完成同步化改造

    摘要:在不可以用的前提下,無論是同步化或者鏈式操作都用不了。于是昨天我自己實現了一個簡單的同步執行的,并以此為基礎實現了鏈式操作。 前言 本來這個系列應該不會這么快更新,然而昨晚寫完前一篇后才發現我的思路中有一個巨大的漏洞。導致我在前一篇中花費大量時間實現了一個復雜的Transaction類——其實完全有更簡單的方式來完成這一切。前篇:http://segmentfault.com/a/11...

    JackJiang 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<