<mark id="n9zld"></mark>

      <thead id="n9zld"><video id="n9zld"></video></thead>

      <ins id="n9zld"></ins>

        <b id="n9zld"></b>

            <font id="n9zld"><video id="n9zld"></video></font>
            <b id="n9zld"></b>

              <dfn id="n9zld"><video id="n9zld"></video></dfn>

                瀏覽器數據庫 IndexedDB 入門教程

                作者: 阮一峰

                日期: 2018年7月 4日

                騰訊課堂 NEXT 學院

                一、概述

                隨著瀏覽器的功能不斷增強,越來越多的網站開始考慮,將大量數據儲存在客戶端,這樣可以減少從服務器獲取數據,直接從本地獲取數據。

                現有的瀏覽器數據儲存方案,都不適合儲存大量數據:Cookie 的大小不超過4KB,且每次請求都會發送回服務器;LocalStorage 在 2.5MB 到 10MB 之間(各家瀏覽器不同),而且不提供搜索功能,不能建立自定義的索引。所以,需要一種新的解決方案,這就是 IndexedDB 誕生的背景。

                通俗地說,IndexedDB 就是瀏覽器提供的本地數據庫,它可以被網頁腳本創建和操作。IndexedDB 允許儲存大量數據,提供查找接口,還能建立索引。這些都是 LocalStorage 所不具備的。就數據庫類型而言,IndexedDB 不屬于關系型數據庫(不支持 SQL 查詢語句),更接近 NoSQL 數據庫。

                IndexedDB 具有以下特點。

                (1)鍵值對儲存。 IndexedDB 內部采用對象倉庫(object store)存放數據。所有類型的數據都可以直接存入,包括 JavaScript 對象。對象倉庫中,數據以"鍵值對"的形式保存,每一個數據記錄都有對應的主鍵,主鍵是獨一無二的,不能有重復,否則會拋出一個錯誤。

                (2)異步。 IndexedDB 操作時不會鎖死瀏覽器,用戶依然可以進行其他操作,這與 LocalStorage 形成對比,后者的操作是同步的。異步設計是為了防止大量數據的讀寫,拖慢網頁的表現。

                (3)支持事務。 IndexedDB 支持事務(transaction),這意味著一系列操作步驟之中,只要有一步失敗,整個事務就都取消,數據庫回滾到事務發生之前的狀態,不存在只改寫一部分數據的情況。

                (4)同源限制 IndexedDB 受到同源限制,每一個數據庫對應創建它的域名。網頁只能訪問自身域名下的數據庫,而不能訪問跨域的數據庫。

                (5)儲存空間大 IndexedDB 的儲存空間比 LocalStorage 大得多,一般來說不少于 250MB,甚至沒有上限。

                (6)支持二進制儲存。 IndexedDB 不僅可以儲存字符串,還可以儲存二進制數據(ArrayBuffer 對象和 Blob 對象)。

                二、基本概念

                IndexedDB 是一個比較復雜的 API,涉及不少概念。它把不同的實體,抽象成一個個對象接口。學習這個 API,就是學習它的各種對象接口。

                • 數據庫:IDBDatabase 對象
                • 對象倉庫:IDBObjectStore 對象
                • 索引: IDBIndex 對象
                • 事務: IDBTransaction 對象
                • 操作請求:IDBRequest 對象
                • 指針: IDBCursor 對象
                • 主鍵集合:IDBKeyRange 對象

                下面是一些主要的概念。

                (1)數據庫

                數據庫是一系列相關數據的容器。每個域名(嚴格的說,是協議 + 域名 + 端口)都可以新建任意多個數據庫。

                IndexedDB 數據庫有版本的概念。同一個時刻,只能有一個版本的數據庫存在。如果要修改數據庫結構(新增或刪除表、索引或者主鍵),只能通過升級數據庫版本完成。

                (2)對象倉庫

                每個數據庫包含若干個對象倉庫(object store)。它類似于關系型數據庫的表格。

                (3)數據記錄

                對象倉庫保存的是數據記錄。每條記錄類似于關系型數據庫的行,但是只有主鍵和數據體兩部分。主鍵用來建立默認的索引,必須是不同的,否則會報錯。主鍵可以是數據記錄里面的一個屬性,也可以指定為一個遞增的整數編號。

                
                { id: 1, text: 'foo' }
                

                上面的對象中,id屬性可以當作主鍵。

                數據體可以是任意數據類型,不限于對象。

                (4)索引

                為了加速數據的檢索,可以在對象倉庫里面,為不同的屬性建立索引。

                (5)事務

                數據記錄的讀寫和刪改,都要通過事務完成。事務對象提供errorabortcomplete三個事件,用來監聽操作結果。

                三、操作流程

                IndexedDB 數據庫的各種操作,一般是按照下面的流程進行的。這個部分只給出簡單的代碼示例,用于快速上手,詳細的各個對象的 API 請看這里

                3.1 打開數據庫

                使用 IndexedDB 的第一步是打開數據庫,使用indexedDB.open()方法。

                
                var request = window.indexedDB.open(databaseName, version);
                

                這個方法接受兩個參數,第一個參數是字符串,表示數據庫的名字。如果指定的數據庫不存在,就會新建數據庫。第二個參數是整數,表示數據庫的版本。如果省略,打開已有數據庫時,默認為當前版本;新建數據庫時,默認為1

                indexedDB.open()方法返回一個 IDBRequest 對象。這個對象通過三種事件errorsuccessupgradeneeded,處理打開數據庫的操作結果。

                (1)error 事件

                error事件表示打開數據庫失敗。

                
                request.onerror = function (event) {
                  console.log('數據庫打開報錯');
                };
                

                (2)success 事件

                success事件表示成功打開數據庫。

                
                var db;
                
                request.onsuccess = function (event) {
                  db = request.result;
                  console.log('數據庫打開成功');
                };
                

                這時,通過request對象的result屬性拿到數據庫對象。

                (3)upgradeneeded 事件

                如果指定的版本號,大于數據庫的實際版本號,就會發生數據庫升級事件upgradeneeded

                
                var db;
                
                request.onupgradeneeded = function (event) {
                  db = event.target.result;
                }
                

                這時通過事件對象的target.result屬性,拿到數據庫實例。

                3.2 新建數據庫

                新建數據庫與打開數據庫是同一個操作。如果指定的數據庫不存在,就會新建。不同之處在于,后續的操作主要在upgradeneeded事件的監聽函數里面完成,因為這時版本從無到有,所以會觸發這個事件。

                通常,新建數據庫以后,第一件事是新建對象倉庫(即新建表)。

                
                request.onupgradeneeded = function(event) {
                  db = event.target.result;
                  var objectStore = db.createObjectStore('person', { keyPath: 'id' });
                }
                

                上面代碼中,數據庫新建成功以后,新增一張叫做person的表格,主鍵是id

                更好的寫法是先判斷一下,這張表格是否存在,如果不存在再新建。

                
                request.onupgradeneeded = function (event) {
                  db = event.target.result;
                  var objectStore;
                  if (!db.objectStoreNames.contains('person')) {
                    objectStore = db.createObjectStore('person', { keyPath: 'id' });
                  }
                }
                

                主鍵(key)是默認建立索引的屬性。比如,數據記錄是{ id: 1, name: '張三' },那么id屬性可以作為主鍵。主鍵也可以指定為下一層對象的屬性,比如{ foo: { bar: 'baz' } }foo.bar也可以指定為主鍵。

                如果數據記錄里面沒有合適作為主鍵的屬性,那么可以讓 IndexedDB 自動生成主鍵。

                
                var objectStore = db.createObjectStore(
                  'person',
                  { autoIncrement: true }
                );
                

                上面代碼中,指定主鍵為一個遞增的整數。

                新建對象倉庫以后,下一步可以新建索引。

                
                request.onupgradeneeded = function(event) {
                  db = event.target.result;
                  var objectStore = db.createObjectStore('person', { keyPath: 'id' });
                  objectStore.createIndex('name', 'name', { unique: false });
                  objectStore.createIndex('email', 'email', { unique: true });
                }
                

                上面代碼中,IDBObject.createIndex()的三個參數分別為索引名稱、索引所在的屬性、配置對象(說明該屬性是否包含重復的值)。

                3.3 新增數據

                新增數據指的是向對象倉庫寫入數據記錄。這需要通過事務完成。

                
                function add() {
                  var request = db.transaction(['person'], 'readwrite')
                    .objectStore('person')
                    .add({ id: 1, name: '張三', age: 24, email: 'zhangsan@example.com' });
                
                  request.onsuccess = function (event) {
                    console.log('數據寫入成功');
                  };
                
                  request.onerror = function (event) {
                    console.log('數據寫入失敗');
                  }
                }
                
                add();
                

                上面代碼中,寫入數據需要新建一個事務。新建時必須指定表格名稱和操作模式("只讀"或"讀寫")。新建事務以后,通過IDBTransaction.objectStore(name)方法,拿到 IDBObjectStore 對象,再通過表格對象的add()方法,向表格寫入一條記錄。

                寫入操作是一個異步操作,通過監聽連接對象的success事件和error事件,了解是否寫入成功。

                3.4 讀取數據

                讀取數據也是通過事務完成。

                
                function read() {
                   var transaction = db.transaction(['person']);
                   var objectStore = transaction.objectStore('person');
                   var request = objectStore.get(1);
                
                   request.onerror = function(event) {
                     console.log('事務失敗');
                   };
                
                   request.onsuccess = function( event) {
                      if (request.result) {
                        console.log('Name: ' + request.result.name);
                        console.log('Age: ' + request.result.age);
                        console.log('Email: ' + request.result.email);
                      } else {
                        console.log('未獲得數據記錄');
                      }
                   };
                }
                
                read();
                

                上面代碼中,objectStore.get()方法用于讀取數據,參數是主鍵的值。

                3.5 遍歷數據

                遍歷數據表格的所有記錄,要使用指針對象 IDBCursor。

                
                function readAll() {
                  var objectStore = db.transaction('person').objectStore('person');
                
                   objectStore.openCursor().onsuccess = function (event) {
                     var cursor = event.target.result;
                
                     if (cursor) {
                       console.log('Id: ' + cursor.key);
                       console.log('Name: ' + cursor.value.name);
                       console.log('Age: ' + cursor.value.age);
                       console.log('Email: ' + cursor.value.email);
                       cursor.continue();
                    } else {
                      console.log('沒有更多數據了!');
                    }
                  };
                }
                
                readAll();
                

                上面代碼中,新建指針對象的openCursor()方法是一個異步操作,所以要監聽success事件。

                3.6 更新數據

                更新數據要使用IDBObject.put()方法。

                
                function update() {
                  var request = db.transaction(['person'], 'readwrite')
                    .objectStore('person')
                    .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });
                
                  request.onsuccess = function (event) {
                    console.log('數據更新成功');
                  };
                
                  request.onerror = function (event) {
                    console.log('數據更新失敗');
                  }
                }
                
                update();
                

                上面代碼中,put()方法自動更新了主鍵為1的記錄。

                3.7 刪除數據

                IDBObjectStore.delete()方法用于刪除記錄。

                
                function remove() {
                  var request = db.transaction(['person'], 'readwrite')
                    .objectStore('person')
                    .delete(1);
                
                  request.onsuccess = function (event) {
                    console.log('數據刪除成功');
                  };
                }
                
                remove();
                

                3.8 使用索引

                索引的意義在于,可以讓你搜索任意字段,也就是說從任意字段拿到數據記錄。如果不建立索引,默認只能搜索主鍵(即從主鍵取值)。

                假定新建表格的時候,對name字段建立了索引。

                
                objectStore.createIndex('name', 'name', { unique: false });
                

                現在,就可以從name找到對應的數據記錄了。

                
                var transaction = db.transaction(['person'], 'readonly');
                var store = transaction.objectStore('person');
                var index = store.index('name');
                var request = index.get('李四');
                
                request.onsuccess = function (e) {
                  var result = e.target.result;
                  if (result) {
                    // ...
                  } else {
                    // ...
                  }
                }
                

                (完)

                留言(38條)

                兼容性怎么樣

                我想請教一下本地數據庫的應用場景有哪些?

                同求應用場景

                瀏覽器兼容:https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API#Browser_compatibility

                各種清理軟件用戶分鐘就清理了

                在開發的時候用于取代mock服務?還有在tob場景下緩存大批量數據減少服務器壓力么

                應該還是做一些緩存而已 只不過提供一些結構化的方式 優于localStorage 罷了

                感謝! 淺顯易懂。

                引用路過的發言:

                各種清理軟件用戶分鐘就清理了

                說的真是廢話,你怎么不說用戶分分鐘就把系統重裝了呢

                如何防止IndexDB被用戶修改呢?

                一峰 ,你的es6 入門網站掛掉了,速度續費啊,大佬

                用戶換個電腦訪問,DB的數據怎么辦

                簡單易懂!

                催更

                坐等每周分享12

                IndexedDB 早在去年就引起重視,一直使用“localforage”,這個庫來操作本地存儲,大家也可以試一試,兼容不錯

                瀏覽器兼容性,可以在這里看 https://caniuse.com/#search=IndexedDB

                這樣的話,是不是用來開發移動app更好了,有了本地存儲

                引用mall的發言:

                用戶換個電腦訪問,DB的數據怎么辦

                這個問題還用問嗎,要是沒有保存到服務器數據肯定沒了。呀,這只是做一些數據緩存而已。文章開頭都已經說明了它的用途了。

                本地存儲的的話,它的安全性怎么樣啊?或者說它的應用場景有哪些呢?存儲一些無關緊要的數據?

                對于頁游開發者,應該很有用

                請教大神 那是不是只要統一管理 這個indexedDB 可以替代 redux

                我也想了解下應用場景

                區塊鏈項目,服務端只存儲加密字符串:客戶端(electron)需要下載大量的加密數據,然后批量解密,并且提供排序和數據流轉。所以前端沒數據庫是不行的。

                老師 能詳細講下 版本 嗎 ? 它如何影響數據增刪改查的?

                引用mall的發言:

                用戶換個電腦訪問,DB的數據怎么辦

                原始數據是從庫里面請求的,然后放到本地indexdb里,之后的
                操作都可以走本地了,本地的indexDB只是服務器db的一個緩存

                阮老師寫的好吶,通俗易懂,這是我根據教程寫的一個通訊錄的項目https://github.com/ilvseyinfu/AddressBook

                很好的入門。正要做一個基于本地的東西

                一個web應用,不需要服務器的那種。比如單機游戲,比如個體店的出納。
                最多的我覺得還是移動端做數據緩存

                關系型數據庫中表的每一行本來就叫記錄

                想給某個對象存儲新增一個字段怎么做?升級數據庫后不能創建這個表,報已經存在

                請問可以轉載阮老師的這篇文章嗎,自當聲明出處。

                好奇怪的用法,先調用了indexedDB.open觸發事件,然后再綁定回調函數。

                最后一個用索引查的例子,有關鍵部分漏了,我這里補充下

                getByIndex: async function (table, keyValue, indexCursor) {
                try {
                let db = await this.openDB();
                let store = db
                .transaction(table.name, 'readonly')
                .objectStore(table.name);
                let keyRng = IDBKeyRange.only(keyValue);
                let request = store.index(indexCursor).openCursor(keyRng);
                let data = [];
                return new Promise(resolve => {
                request.onerror = function (event) {
                reject(false);
                };
                request.onsuccess = function (event) {
                var cursor = event.target.result;
                if (cursor) {
                console.log(cursor.value);
                data.push(cursor.value);
                cursor.continue();
                }
                };
                resolve(data);
                });
                } catch (error) {
                return Promise.reject(false);
                }
                }

                請問 對于服務器emqtt推送的消息需要存入緩存 如果頻率特別高 怎么處理才更加合理呢 localStorage、indexedDB 對于這種高并發的情況 怎么才能保證性能呢

                還有一點比較疑惑 就是一張表只能存50條嗎 用谷歌調試 在面板只能看到50條數據 但是可以取到所有數據(>50)這個是谷歌瀏覽器的限制嗎

                學習完后寫了一個操作的工具函數,希望對大家有幫助,詳細請移步掘金 https://juejin.im/post/5db6902ae51d452a0e212d99

                我要發表看法

                «-必填

                «-必填,不公開

                «-我信任你,不會填寫廣告鏈接

                99爱视频