摘要：概述是一個事務型數(shù)據(jù)庫系統(tǒng)，類似于基于的。然而不同的是它使用固定列表，是一個基于的面向?qū)ο蟮臄?shù)據(jù)庫。參考文檔瀏覽器數(shù)據(jù)庫入門教程

IndexedDB 是一個事務型數(shù)據(jù)庫系統(tǒng)，類似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表，IndexedDB 是一個基于 JavaScript 的面向?qū)ο蟮臄?shù)據(jù)庫。
現(xiàn)有的瀏覽器數(shù)據(jù)儲存方案，都不適合儲存大量數(shù)據(jù)：Cookie 的大小不超過 4KB，且每次請求都會發(fā)送回服務器 LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景

簡單來說，IndexedDB 就是瀏覽器提供的本地數(shù)據(jù)庫。

IndexedDB 具有以下特點

鍵值對儲存

異步操作（避免鎖死瀏覽器）

支持事務

同源限制（協(xié)議+域名+端口）

存儲空間大

支持二進制存儲（ArrayBuffer 對象和 Blob 對象，可存儲文件數(shù)據(jù)）

對比關系數(shù)據(jù)庫 MySql 可以得到以下關系

數(shù)據(jù)庫：IDBDatabase

表格：對象倉庫（IDBObjectStore）

行數(shù)據(jù)：對象倉庫存儲的一條數(shù)據(jù)

索引：IDBindex，加速數(shù)據(jù)的檢索（在對象倉庫里面可為不同的鍵創(chuàng)建）

事務：IDBTransaction

操作請求：IDBRequest

IDBCursor：遍歷對象存儲空間和索引

IDBKeyRange：定義鍵的范圍數(shù)據(jù)

// 全局變量兼容性問題

window.indexedDB =
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB ||
    window.msIndexedDB;

window.IDBTransaction =
    window.IDBTransaction ||
    window.webkitIDBTransaction ||
    window.msIDBTransaction;

window.IDBKeyRange =
    window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

if (!window.indexedDB) {
    window.alert(
        "Your browser doesn"t support a stable version of IndexedDB. Such and such feature will not be available."
    );
}

var databaseName = "MyTestDatabase";
var databaseVersion = 1;

// 打開數(shù)據(jù)庫
var request = window.indexedDB.open(databaseName, databaseVersion);

request.onsuccess = function(event) {
    console.log("open success");
};

request.onerror = function(event) {
    console.log("open fail");
};

request.onupgradeneeded = function(event) {};

window.indexedDB.open函數(shù)打開對應的數(shù)據(jù)庫，如果沒有該數(shù)據(jù)庫就會新建。

新建數(shù)據(jù)庫或者數(shù)據(jù)庫版本大于當前版本會觸發(fā)onupgradeneeded事件

數(shù)據(jù)庫為什么會有版本？
因為數(shù)據(jù)庫的數(shù)據(jù)解構可能會發(fā)生改變的，所以一般修改數(shù)據(jù)解構的操作在onupgradeneeded里面書寫

window.indexedDB.deleteDatabase(databaseName);

創(chuàng)建和修改表格是修改數(shù)據(jù)庫的數(shù)據(jù)解構，所以我把他們寫在onupgradeneeded事件里

request.onupgradeneeded = function(event) {
    console.log("onupgradeneeded");
    db = event.target.result;

    // 創(chuàng)建倉庫對象（創(chuàng)建表格）
    // 這里我將主鍵設置為id
    var objectStore = db.createObjectStore(objectStoreName, {
        keyPath: "id",
        autoIncrement: true
    });
};

request.onupgradeneeded = function(event) {
    console.log("onupgradeneeded");
    db = event.target.result;

    // 刪除倉庫對象（刪除表格）
    db.deleteObjectStore(objectStoreName);
};

var databaseName = "MyTestDatabase";
var databaseVersion = 1;
var db;
var objectStoreName = "objectStore1";
var storeDatas = [
    { id: "1", name: "張三", age: 18 },
    { id: "2", name: "李四", age: 19 }
];

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

request.onsuccess = function(event) {
    console.log("open success");
    db = event.target.result;

    // 將數(shù)據(jù)保存到新建的對象倉庫
    var objectStore = db
        .transaction([objectStoreName], "readwrite")
        .objectStore(objectStoreName);

    storeDatas.forEach(function(dataItem) {
        // 添加一條數(shù)據(jù)
        objectStore.add(dataItem);
    });
};

var databaseName = "MyTestDatabase";
var databaseVersion = 1;
var db;
var objectStoreName = "objectStore1";
var storeDatas = [
    { id: "1", name: "張三", age: 18 },
    { id: "2", name: "李四", age: 19 }
];

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

request.onsuccess = function(event) {
    console.log("open success");
    db = event.target.result;

    console.log("刪除數(shù)據(jù)");
    var req = db
        .transaction([objectStoreName], "readwrite")
        .objectStore(objectStoreName)
        .delete("2"); // 這里的“2”指定的是主鍵的鍵值

    req.onsuccess = function() {
        console.log("刪除成功");
    };

    req.onerror = function() {
        console.log("刪除失敗");
    };
};

console.log("更新數(shù)據(jù)");
var req = db
    .transaction([objectStoreName], "readwrite")
    .objectStore(objectStoreName)
    .put({
        id: "2",
        name: "王五",
        age: 17
    }); // 將整條數(shù)據(jù)給替換

req.onsuccess = function() {
    console.log("更新成功");
};

req.onerror = function() {
    console.log("更新失敗");
};

console.log("讀取數(shù)據(jù)");
var req = db
    .transaction([objectStoreName], "readonly")
    .objectStore(objectStoreName)
    .get("1"); // 這里的“1”也是主鍵的鍵值

req.onsuccess = function() {
    console.log("獲取成功");
    console.log(req.result);
};

req.onerror = function() {
    console.log("獲取失敗");
};

console.log("遍歷數(shù)據(jù)");
var objectStore = db
    .transaction([objectStoreName], "readonly")
    .objectStore(objectStoreName);

var count = 0;
objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
        console.log(`第${++count}條數(shù)據(jù)為`);
        console.log(cursor.value);
        cursor.continue(); // 將指針移動下一個位置
    } else {
        console.log("沒有更多數(shù)據(jù)");
    }
};

indexedDB的API還是非常多的，這里只是簡單介紹了最常用的幾個操作（個人認為^_^）。

IndexedDB_API

瀏覽器數(shù)據(jù)庫 IndexedDB 入門教程