IndexedDB 資料庫用法
關於IndexedDB資料庫主要特點可以參閱IndexedDB 資料庫概述一章節。
本文將在總體上介紹一下IndexedDB資料的用法,目的是讓讀者能夠大致掌握資料庫的使用流程。
考慮到篇幅問題,本文不會對具體技術細節做過多介紹,更多內容參閱本教程版本相關文章。
一.資料的開啟與新建:
使用IndexedDB資料庫之前,需要開啟一個資料庫,如果沒有則需要新建。
通過indexedDB.open方法即可開啟或者新建一個資料庫,indexedDB屬於window物件。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let request = window.indexedDB.open(databaseName, version);
由於indexedDB屬於window物件,所以在呼叫時可以將window省略。
引數解析:
(1).databaseName:必需,用於規定資料庫的名稱。
(2).version:可選,用於規定資料庫的版本,一個數值型別。
通過上述方式可以開啟指定名稱與版本的IndexedDB資料庫。
如果無對應資料庫則會通過上述方法新建一個資料庫,開啟與新建資料庫都採用indexedDB.open方法。
注意:此方法是非同步操作,類似於AJAX請求,返回的結果並不是資料庫,而是IDBOpenDBRequest型別物件。
關於indexedDB.open方法更詳細介紹參閱IndexedDB.open() 開啟與新建資料庫一章節。
二.新增物件倉庫:
關係型資料庫中,建立資料庫後,如果要儲存資料,那麼首先要建立一個表,然後再新增行。
但是IndexedDB資料庫並沒有表的概念,替代表的是objectStore物件倉庫,可以認為它是indexedDB中的表。
通過createObjectStore方法可以建立物件倉庫,此方法屬於IDBDatabase資料庫物件。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let objectStore = db.createObjectStore(objectStoreName,{ keyPath: 'id' });
引數解析如下:
(1).db:IDBDatabase資料庫物件,也就是建立或者開啟的資料庫。
(2).objectStoreName:被建立物件倉庫的名稱,字串。
(3).{ keyPath: 'id' }:配置物件,設定物件倉庫儲存資料的主鍵為id。
程式碼例項片段如下:
[JavaScript] 純文字檢視 複製程式碼let request = window.indexedDB.open("antzone", 1); request.onsuccess = (ev) => { let db = ev.target.result; if (!db.objectStoreNames.contains('person')) { let objectStore = db.createObjectStore('person', { keyPath: 'id' }); } } request.onupgradeneeded = (ev) => { let db = ev.target.result; let objectStore = db.createObjectStore("person",{ keyPath: 'id' }); }
程式碼執行效果截圖如下:
程式碼分析如下:
(1).首先通過indexedDB.open方法建立或者開啟資料庫"antzone"。
(2).indexedDB.open方法是一個非同步操作,返回的是一個IDBOpenDBRequest型別物件request。
(3).request物件的upgradeneeded或success事件可以監聽資料庫升級(包括建立)或開啟是否成功。
(4).如果新建立資料庫成功,那麼首先觸發upgradeneeded事件,然後再觸發success事件。
(5).如果資料庫已經存在,且不涉及版本更新,那麼只觸發success事件。
(6).當然如果出錯,則會觸發error事件。
(7).假設上述程式碼是新建資料庫,首先觸發upgradeneeded事件並建立對應物件倉庫,然後再觸發success事件。建立物件倉庫需要在upgradeneeded事件處理函式中進行,最好首先判斷一下對應的物件倉庫是否存在,如果存在則不再去建立,否則會報錯。
更多關於建立物件倉庫內容可以參閱createObjectStore() 建立物件倉庫一章節。
三.資料操作:
資料操作無非是增刪改查,資料儲存在物件倉庫中,通過如下方法可以實現對應操作:
(1).新增資料具體參閱IDBObjectStore.add() 方法一章節。
(2).讀取資料具體參閱IDBObjectStore.get() 方法一章節。
(3).遍歷資料具體參閱IndexedDB 遍歷資料一章節。
(4).更新資料具體參閱IDBObjectStore.put() 方法一章節。
(5).刪除資料具體參閱IDBObjectStore.delete() 方法一章節。
相關文章
- indexedDB 資料庫 索引Index資料庫索引
- indexedDB 資料庫版本Index資料庫
- IndexedDB 資料庫概述Index資料庫
- IndexedDB 資料庫新增資料Index資料庫
- indexedDB 資料庫主鍵Index資料庫
- indexedDB 刪除資料庫Index資料庫
- IndexedDB資料庫介紹Index資料庫
- 前端的資料庫:IndexedDB入門前端資料庫Index
- indexedDB 刪除物件倉庫所有資料Index物件
- 瀏覽器資料庫 IndexedDB(一) 概述瀏覽器資料庫Index
- indexedDB 更新資料Index
- indexedDB 新增資料Index
- IndexedDB.open()開啟與新建資料庫Index資料庫
- IndexedDB.open() 開啟與新建資料庫Index資料庫
- 瀏覽器資料庫 IndexedDB 入門教程瀏覽器資料庫Index
- HTML5 進階系列:indexedDB 資料庫HTMLIndex資料庫
- indexedDB 遍歷資料Index
- indexedDB 查詢資料Index
- indexedDB 刪除資料Index
- indexedDB 批量新增資料Index
- OushuDB 資料庫基本用法 (上)資料庫
- indexedDB 通過索引查詢資料Index索引
- SQL資料庫中Truncate的用法SQL資料庫
- 資料庫Delete的多種用法資料庫delete
- Sql連結資料庫的用法SQL資料庫
- IndexedDB 建立資料庫時使用自增的Key 更新資料庫遇到的問題的一點記錄Index資料庫
- mysql資料庫查詢pdo的用法MySql資料庫
- 資料庫效能測試:sysbench用法詳解資料庫
- 帶你瞭解資料庫中JOIN的用法資料庫
- 帶你瞭解資料庫中group by的用法資料庫
- 資料庫表的連線方式及用法(一)資料庫
- 用IndexedDB+Cookie實現HTML5本地資料庫關鍵詞檢索IndexCookieHTML資料庫
- 達夢資料庫Disql用法詳解之Disql命令列命令用法介紹資料庫SQL命令列
- 資料庫關鍵詞 drop、truncate和delete的用法資料庫delete
- python資料庫連線池的正確用法Python資料庫
- 舉例說明Oracle資料庫審計的用法Oracle資料庫
- 初探IndexedDBIndex
- indexedDB articleIndex