浏览器本地mysql_IndexedDB：浏览器里的本地数据库
IndexedDB 是什么
在現代瀏覽器的本地存儲方案中，indexedDB 是一項重要的能力組成， 它是可以在瀏覽器端使用的本地數據庫，可以存儲大量數據，提供接口來查詢，還可以建立索引，這些都是其他存儲方案 Cookie 或者 LocalStorage 無法提供的能力。單從數據庫類型來看，IndexedDB 是一個非關系型數據庫(不支持通過 SQL 語句操作)。
IndexedDB 的主要概念
IndexedDB 是一個比較復雜的 API 組合，學習它的過程就相當于學習它的各個對象 API 接口，包括以下這些( IDB 指當前操作的數據庫實例 )：
數據庫：IDBDatabase 對象
倉庫對象： IDBObjectStore 對象
索引：IDBIndex 對象
事務：IDBTransaction 對象
操作請求：IDBRequest 對象
指針：IDBCursor 對象
主鍵：IDBKeyRange 對象
在這些 API 中包含一些主要概念:
數據庫：數據庫是所有相關數據的基本容器。在同源策略( 協議 + 域名 + 端口 )的前提下，每個域名下可以新建任意多的數據庫。IndexedDB 中有版本概念，這就規定了同一時刻下只有一個版本的數據庫存在。
對象倉庫：對象倉庫 ObjectStore 在 IndexedDB 中對應的是 MYSQL 中的表 Table。
數據：對象倉庫中記錄的是若干條數據，數據只有主鍵和數據體兩個部分，主鍵不能重復，可以為自增的整數編號或者數據中指定的一個屬性。數據體可以是任意數據類型，不限于對象。
索引：為不同的屬性建立索引可以加快數據的檢索。
事務：數據的 CURD (增刪查改) 都要通過事務來完成。
通過簡單的對比圖來理解 IndexedDB 的概念：
快速起步 IndexedDB
在介紹了 IndexedDB 的主要概念之后，可以通過一個簡單實用的 CURD 例子來學習在日常開發中我們是怎么使用 IndexedDB 的，各個 API 細節日后可以慢慢深入學習。
必不可少的瀏覽器支持檢查:
if(!('indexedDB' in window)){
console.log('當前瀏覽器支持 IndexedDB');
return;
} else {
console.log('您的瀏覽器不支持 IndexedDB')
// todo 建議升級或者更換其他瀏覽器
}
連接數據庫
// 數據庫實例
let db;
// 數據庫打開操作，第一個參數是數據庫名稱, 第二個參數是數據庫版本
let DBRequestLink = window.indexedDB.open('dataBaseName', 1)
DBRequestLink.onsuccess = function(event) {
// 獲取數據庫實例
db = DBRequestLink.result;
// 其他操作
};
// 這個監聽回調觸發于數據庫首次新建、open數據庫時傳遞新版本(只能比之前傳遞的版本高)
DBRequestLink.onupgradeneeded = function(event) {};
創建數據庫的主鍵和字段
DBOpenRequest.onupgradeneeded = function(event) {
let db = event.target.result;
// 創建一個數據庫存儲對象，并指定主鍵
let objectStore = db.createObjectStore('person', {
keyPath: 'id',
autoIncrement: true
});
/* 定義存儲對象的數據項
* 第一個參數是創建的索引名稱，可以為空
* 第二個參數是索引使用的關鍵名稱，可以為空
* 第三個參數是可選配置參數，可以不傳，常用參數之一就是 unique ，表示該字段是否唯一，不能重復
*/
objectStore.createIndex('id', 'id', {
unique: true
});
objectStore.createIndex('name', 'name');
objectStore.createIndex('age', 'age');
objectStore.createIndex('sex', 'sex');
};
在上述操作中，我們先定義了上文中提到的 IDBObjectStore 對象，并指定主鍵為 id ，隨后又通過 createIndex 來創建字段。值得注意的是雖然創建了四個字段，但在 IndexedDb 中數據還是分為主鍵 id 和數據主體兩個部分，并不會像 MYSQL 中在 Table 中呈現四列。
向數據庫中添加數據
// 這里的 db 就是第二步中的 db 對象，
// transaction api 的第一個參數是數據庫名稱，第二個參數是操作類型
let newItem = {
id: 1,
name: '徐嘻嘻',
age: 3,
sex: 'female'
};
let transaction = db.transaction('dataBaseName', "readwrite");
// 找到對應的存儲對象
let objectStore = transaction.objectStore('person');
// 添加到數據對象中, 傳入JavaScript對象
objectStore.add(newItem);
新建操作是在新建了一個 事務( IDBTransaction 對象)的前提下完成的，傳入的數據不需要做任何轉換，可以無縫傳入?JavaScript?對象。
修改數據庫中的數據
// 這里的 db 就是第二步中的 db 對象，
// 新建事務
let transaction = db.transaction('dataBaseName', "readwrite");
// 新數據主體
let newRecord = {
id: 1,
name: '徐嘎嘎',
age: 5,
sex: 'male'
};
// 打開已經存儲的數據對象
let objectStore = transaction.objectStore('person');
// 獲取存儲的對應鍵的存儲對象, 傳入主鍵 id，值為 1
let objectStoreRequest = objectStore.get(1);
// 獲取成功后替換當前數據
objectStoreRequest.onsuccess = function(event) {
// 數據
var record = objectStoreRequest.result;
// 遍歷替換
for (let key in newRecord) {
if (typeof record[key] != 'undefined' || key !== 'id') {
record[key] = newRecord[key];
}
}
// 更新數據庫存儲數據
objectStore.put(record);
};
基本思路是創建一個事務，先找到想要修改的數據主體，然后在更新該數據主體內容。 事務創建邏輯相同，并在創建之后調用事務的 get 和 put 操作。
刪除數據庫中的數據
// 這里的 db 就是第二步中的 db 對象，
// 新建事務
let transaction = db.transaction('dataBaseName', "readwrite");
// 打開已經存儲的數據對象
let objectStore = transaction.objectStore('person');
// 獲取存儲的對應鍵的存儲對象, 傳入主鍵 id，值為 1
let objectStoreRequest = objectStore.delete(1);
調用 delete 接口，傳入指定的 id 即可。
佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜索大全https://55wd.com
可以提效的類庫
? 從上面的例子中可以看出，每一次操作需要至少三行代碼才能完成，而且需要一直維護 DB 的對象引用，避免它被回收，這樣子開發代碼膨脹得太厲害，所以我們在業務中引入其他類庫來減少代碼量
LocalForage
可以指定數據存儲方案，默認依次為 IndexedDB、WebSQL、LocalStorage，意味著當前 IndexedDB 失效可以有兜底措施。
API 簡化為 CRUD ( getItem、removeItem、setItem、clear )
庫大小為 475b
Pouchdb
API 簡化為 put、get、remove，基于 promise 來檢查回收錯誤
有較好的錯誤日志機制， 如失敗，沖突等等，方便調試
庫大小為 255b
這兩個類庫比較符合我們的開發要求，我們當前使用的是 LocalForage。
結束語
在業務開發中，我們都會碰到或多或少的本地存儲需求，本文介紹了其中一種存儲方案 IndexedDB 的簡單實踐。就我們的應用場景來看，IndexedDB 的適用面還是很廣的。考慮到 IE10 也可以支持，把它實踐在實際項目中應該是沒有問題的。
總結
以上是生活随笔為你收集整理的浏览器本地mysql_IndexedDB：浏览器里的本地数据库的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql show full proc
- 下一篇： mysql sycho_Java面试题