indexeddb全方位詳解

indexed是indexeddb的縮寫，是一款用來在瀏覽器端實現本地資料庫操作的JavaScript API。它採用了對象倉庫（Object Store）存儲數據，通過key-value的方式進行數據的增刪改查操作，並且與Web Worker結合可以高效的處理大量數據操作。

一、indexeddb介紹

1、indexeddb的概念

IndexedDB是HTML5新提供的瀏覽器端存儲數據的一種方案，推出的初衷是為了支持在Web端應用中離線存儲方案的開發。IndexedDB支持在客戶端本地離線存儲數據，提供下一級緩存，並不依賴於網路連接。

2、indexeddb的特點

IndexedDB擅長處理大量的客戶端數據，定義了一個對象倉庫，其中包含了可以使用鍵值對存儲的對象。IndexedDB也支持存儲其他類型的數據，如BLOB和ArrayBuffer。

3、indexeddb的優勢

相對於localStorage和sessionStorage，IndexedDB比較優勢比較明顯：

支持存儲非字元串類型數據：localStorage和sessionStorage只支持存儲字元串類型數據，而IndexedDB可以存儲各種類型的數據，通過Blob對象可以存儲二進位數據，通過ArrayBuffer對象可以存儲大文件。
支持創建多個對象倉庫：每個對象庫相當於一張表，我們可以使用不同的數據結構來存儲不同類型的數據。
支持非同步操作：IndexedDB以非同步的方式讀取和存儲數據，可以在讀取和寫入大段數據時提高性能。
支持事務處理：IndexedDB支持通過事務處理選項來確保數據的完整性，以及避免在並發操作時對數據產生衝突。

因此，IndexedDB適用於那些需要大量讀寫本地數據資源的Web應用，比如：郵件客戶端、CRM系統、日記、聊天等。

二、indexeddb入門

1、創建indexeddb資料庫

    let db;
    let request = window.indexedDB.open("myDatabase", 1);

    request.onerror = function(event) {
        console.log("資料庫打開報錯");
    };
    request.onsuccess = function(event) {
        db = request.result;
        console.log("資料庫打開成功");
    };
    request.onupgradeneeded = function(event) {
        db = event.target.result
        var objectStore = db.createObjectStore("customers", { keyPath: "id" });
        objectStore.createIndex("name", "name", { unique: false });
        objectStore.createIndex("email", "email", { unique: true });
    };

打開和創建資料庫的過程是非同步執行的。開發者需要在open方法的onsuccess函數處理非同步回調函數時獲取db對象。

2、向indexeddb資料庫中存儲數據

    let tx = db.transaction(["customers"], "readwrite");
    let objectStore = tx.objectStore("customers");
    let request = objectStore.add({ id: 1, name: "John", email: "john@doe.com" });
    request.onerror = function(event) {
        console.log("添加數據失敗");
    };
    request.onsuccess = function(event) {
        console.log("添加數據成功");
    };
    tx.oncomplete = function() {
        console.log("事務完成");
    };

在indexeddb中添加和修改數據的邏輯都是一樣的。首先需要開啟一個事務，然後新建或者獲取已經創建好的object store，最後再向object store中添加數據。

三、indexed註解

1、indexeddb的概念

indexed屬性的特殊含義是將指定的欄位進行索引，建立索引後可以通過索引快速進行數據查找，通過索引的方式可以提高數據查詢的效率。

    let tx = db.transaction(["customers"], "readonly");
    let objectStore = tx.objectStore("customers");
    let index = objectStore.index("name");
    let request = index.get("John");
    request.onerror = function(event) {
        console.log("獲取數據失敗");
    };
    request.onsuccess = function(event) {
        console.log("獲取John的信息：" + request.result.email);
    };

在indexeddb中通過index(索引)對象可以進行類似sql中where關鍵字的匹配操作。

2、indexeddb可以刪掉嗎

可以使用indexedDB.deleteDatabase()方法刪除indexedDB資料庫，一旦被刪除就無法恢復。

    let req = indexedDB.deleteDatabase('mycoolnewdatabase');
    req.onsuccess = function () { console.log("Delete successfully");};
    req.onerror = function () { console.log("Delete unsuccessful");};

四、indexedDB使用

1、使用事務

需要使用IndexedDB執行數據讀寫操作時，建議將操作寫成一個事務，以保證數據的完整性和一致性。通常一個事務中會包含多個操作，事務的目的是確保相關操作的原子性，也就是說：事務中的一系列操作要麼全部成功，要麼全部失敗。

    let tx = db.transaction(["customers"], "readwrite");
    let objectStore = tx.objectStore("customers");
    objectStore.put({ id: 1, name: "John", email: "john@doe.com" });
    objectStore.put({ id: 2, name: "Bob", email: "bob@doe.com" });
    objectStore.put({ id: 3, name: "Tom", email: "tom@doe.com" });
    tx.oncomplete = function(event) {
        console.log("事務完成");
    };

2、使用游標

使用游標可以通過一組條件搜索已存儲的記錄，並按照指定的順序返回這些記錄。cursor方法將返回包含已索引資料庫對象中一個表格中所有先前添加的對象；當你使用它時，你需要通過檢查每個對象檢查檢索的數據是否與您的期望匹配，只有當它們匹配時才執行您的代碼。

    let tx = db.transaction(["customers"], "readonly");
    let store = tx.objectStore("customers");
    let index = store.index('name');
    index.openCursor().onsuccess = function(event) {
        let cursor = event.target.result;
        if (cursor) {
            console.log(cursor.value.name);
            cursor.continue();
        }
    };

五、indexed by

1、indexed by的概念

indexed by是基於indexeddb進行一些restapi的封裝，實現簡單易用、高效便捷的本地存儲方案。

2、indexed by的使用

    const client = new IndexedBy({
        dbName: 'database_name',
        objectStores: [{
            name: 'object_store_name',
            keyPath: 'id'
        }]
    });

    client.init().then(() => {
        client.actions.Insert('object_store_name', {
            id: 1,
            name: '可樂',
            number: 10
        });
    });

使用indexedby可以大大簡化indexeddb的API使用難度。

六、indexed模式

1、indexed模式的概念

indexed模式是讓indexeddb在有必要時自動升級資料庫模型，讓存儲的數據更有條理。例如，當現有的「顧客」存儲庫缺少郵政編碼一列時，indexedDB將自動更新資料庫。

    let db;
    let request = indexedDB.open("myDatabase", 2);
    request.onupgradeneeded = function(event) {
      let db = event.target.result;
      let objectStore = db.createObjectStore("customers", { keyPath: "id" });
      objectStore.createIndex("name", "name", { unique: false });
      objectStore.createIndex("email", "email", { unique: true });
      objectStore.createIndex("zipcode", "zipcode", { unique: false });
    };
    request.onsuccess = function(event) {
      db = event.target.result;
    };

七、indexed by什麼意思

indexed by什麼意思

indexedby是一種全新的IndexedDB庫，為IndexedDB提供了更面向對象的訪問方式。它通過簡單的鏈式調用和類似mongoose的模式來增強IndexedDB。

由此可見，”indexed by”就是把IndexedDB封裝成了一個庫，面向對象化和鏈式調用是它的特色。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/249267.html