JavaScript >> Javascript 文檔 >  >> JavaScript

快速提示:使用 IndexedDB 在瀏覽器中存儲數據

IndexedDB API 為您提供了在瀏覽器中的快速鍵/值存儲。它支持的瀏覽器比你想像的要多(多虧了 shim,它甚至可以在更舊的瀏覽器中工作)。這意味著當需要時,您可以在用戶的瀏覽器中存儲持久的數據集合,而無需依賴互聯網連接。壞消息是 IndexedDB 有一個非常麻煩和冗長的 API,使用起來很痛苦。幸運的是,有一個可以提供巨大幫助的小型圖書館。它被稱為 db.js,在這個快速提示中,我將向您展示如何使用它。

如何使用 db.js

IndexedDB 嚴重依賴於設置回調、偵聽錯誤以及處理大量臨時變量。 Db.js 對您隱藏了這一點,並公開了一個任何 jQuery 粉絲都會喜歡的更線性且易於工作的界面。該庫甚至使用與 jQuery 相同的延遲/承諾機制。如果你不知道我前面提到的任何東西是什麼意思,別擔心,一旦你看到一些代碼就會變得更清楚。

為此,我們將構建一個小型演示應用程序。它將執行以下操作:

  • 首先,定義新鍵/值存儲的架構以及版本號;
  • 嘗試打開數據庫,如果一切正常則繼續;
  • 為點擊“添加”元素設置事件監聽器。在偵聽器的主體中,我們將向數據庫中插入一條記錄並在頁面上顯示該項目;
  • 最後,當點擊某個項目時,從數據庫中刪除相應的記錄並將其從頁面中移除。

除了超快之外,這些操作也是持久的,所以當你刷新頁面或關閉瀏覽器時,數據仍然會在那裡。在實際應用程序中,您可能希望將 IndexedDB 存儲的內容同步到您的服務器,但我們今天不會這樣做。

代碼

第一步是定義我們數據存儲的模式。與 MySQL 等關係數據庫不同,我們在這裡沒有預定義列和類型的表的概念。 IndexedDB 可以在單個數據存儲中保存任意 JavaScript 對象。此步驟中唯一的要求是可選地選擇一個 id 字段,無論您是否希望它自動遞增,並定義零個或多個索引。

assets/js/script.js

// Use the db.js library, define a schema,
// and listen for events

db.open({
    name: 'database',
    version: 2,
    schema: {
        items: {
            key: {
                keyPath: 'id',
                autoIncrement: true
            },
            indexes: {
                color: { unique: false }
            }
        }
    }
})

定義索引將告訴 IndexedDB 它應該在您插入數據存儲的對像中查找該屬性。然後,您將能夠檢索和排序具有此索引的所有對象。在上面的示例中,我在 color 屬性上定義了一個索引,並告訴 db.js 我不希望它是唯一的(如果是,我將只能存儲一個具有該顏色的對象)。我沒有直接在應用程序中使用這個索引,但我還是決定包含它來向您展示它是如何完成的。如果您希望更新架構,則還需要增加版本號。

與其他一切一樣,在 IndexedDB 中打開數據庫是異步的,並且在許多情況下可能會失敗(瀏覽器不支持它,版本號錯誤,或者用戶處於隱身模式)。我們必須將回調傳遞給 done() 打開數據庫後的方法,以確保一切都成功我們還將獲得對我們需要運行查詢的服務器對象的引用。

db.open({
    name: 'database',
    version: 2,
    schema: {
        items: {
            key: {
                keyPath: 'id',
                autoIncrement: true
            },
            indexes: {
                color: { unique: false }
            }
        }
    }
}).done(function(server){

    // The database was successfully opened. We can
    // run transactions using the server varaible

    // Listen for the document ready event, as we will
    // be working with the dom

    $(function() {

        // Cache some selectors

        var add = $('#add'),
            items = $('#items');

        var colors = ['blue', 'green', 'yellow', 'pink'];

        // On dom.ready, select all items and update the #items ul
        server.items.query().filter().execute().done(function(results){

            if(!results){
                return;
            }

            $.each(results, function(){
                createItem(this);
            });

        });

        // Listen for clicks on the add button
        add.click(function(){

            var item = {
                text: (new Date()).toTimeString(),
                color: colors[ Math.floor( Math.random()*colors.length )]
            };

            server.items.add(item).done(function(){
                createItem(item);
            });

            // If you wish to update an item:
            // server.items.update({id:123, color:'pink', text:'asdf'});
        });

        // When an item is clicked, remove it from the database.
        $('#items').on('click', 'li:not(#add)', function(){
            var item = $(this);
            server.items.remove( item.data('id') ).done(function(){
                item.fadeOut();
            });
        });

        function createItem(item){
            var tmp = $('<li><p></p></li>');

            tmp.addClass( item.color )
                .data('id', item.id)
                .find('p').text( item.text );

            items.prepend(tmp);
        }

    });

}).fail(function(error){

    console.error("An error occured: ", error);

});

在回調內部,我們:

  • 監聽 document.ready 事件;
  • 從數據庫中選擇所有現有項目並將其顯示在頁面上;
  • 監聽“添加”元素的點擊並創建新項目;
  • 監聽對項目本身的點擊並將其從數據庫中刪除;
  • 定義用於創建項目並將其附加到頁面的回調函數。

在失敗事件中,我們只將遇到的錯誤記錄到控制台。 到此,我們簡單的 IndexedDB 示例就完成了!

有關使用 db.js 的更多信息和示例,請參閱開發者的這篇博文,或閱讀源代碼。


Tutorial JavaScript 教程
  1. 我可以直接從 GitHub 運行 HTML 文件,而不僅僅是查看它們的源代碼嗎?

  2. #NeedToNode 回顧:介紹 Node.js v6 LTS Boron

  3. 通過 javascript/jquery 刪除/截斷前導零

  4. 使用延續本地存儲變量簡化您的節點代碼

  5. Angular:Slice 和 *ngIf 用於條件省略號/數據工具提示

  6. React 中的本地存儲

  7. 在 mouseup 事件處理程序中取消單擊事件

  1. AWS SNS 和 SQS 事件總線

  2. 在線黑客馬拉松中的 BUIDL 工具可獲得高達 9,000 美元的獎金

  3. 處理我的投資組合

  4. 從頭開始構建 Vuex。

  5. 使用 React 測試庫更好地測試文本內容

  6. NHipster,全棧 nodejs 應用的 jhipster 加速器

  7. 使用 Firebase 作為您的登錄提供程序

  1. 如何在 Vue.js 中正確使用 $refs 進行 DOM 操作

  2. 10 多種適用於 Android 開發人員的有用工具和套件

  3. JSFiddle 中的暗模式

  4. 使用 Mocha 對 Node.js REST API (MongoDB) 進行單元測試