indexedDB入門

awesome23 發布于2019-08-23 15:10 / 3275人閱讀

摘要：概述是一個事務型數據庫系統，類似于基于的。然而不同的是它使用固定列表，是一個基于的面向對象的數據庫。參考文檔瀏覽器數據庫入門教程

概述

IndexedDB 是一個事務型數據庫系統，類似于基于 SQL 的 RDBMS。然而不同的是它使用固定列表，IndexedDB 是一個基于 JavaScript 的面向對象的數據庫。

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

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

IndexedDB 具有以下特點

鍵值對儲存

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

支持事務

同源限制（協議+域名+端口）

存儲空間大

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

基本概念

對比關系數據庫 MySql 可以得到以下關系

數據庫：IDBDatabase

表格：對象倉庫（IDBObjectStore）

行數據：對象倉庫存儲的一條數據

索引：IDBindex，加速數據的檢索（在對象倉庫里面可為不同的鍵創建）

事務：IDBTransaction

操作請求：IDBRequest

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

IDBKeyRange：定義鍵的范圍數據

基本操作 兼容性注意點

// 全局變量兼容性問題

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;

// 打開數據庫
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函數打開對應的數據庫，如果沒有該數據庫就會新建。

新建數據庫或者數據庫版本大于當前版本會觸發onupgradeneeded事件

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

刪除數據庫

window.indexedDB.deleteDatabase(databaseName);

對象倉庫操作（表格操作）

創建和修改表格是修改數據庫的數據解構，所以我把他們寫在onupgradeneeded事件里

創建表格

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

    // 創建倉庫對象（創建表格）
    // 這里我將主鍵設置為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;

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

    storeDatas.forEach(function(dataItem) {
        // 添加一條數據
        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("刪除數據");
    var req = db
        .transaction([objectStoreName], "readwrite")
        .objectStore(objectStoreName)
        .delete("2"); // 這里的“2”指定的是主鍵的鍵值

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

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

修改數據（改）

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

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

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

獲取數據（查）

console.log("讀取數據");
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("遍歷數據");
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}條數據為`);
        console.log(cursor.value);
        cursor.continue(); // 將指針移動下一個位置
    } else {
        console.log("沒有更多數據");
    }
};

小結

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

參考文檔

IndexedDB_API

瀏覽器數據庫 IndexedDB 入門教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101633.html

前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）

摘要：前端最基礎的就是。這是初級階段的最后一堂了。敏感數據要設置防止意外的被他人獲取。是什么服務器端存放數據。都是用來做瀏覽器端存儲的。解決的問題的存儲大小問題。該使用索引來實現對該數據的高性能搜索。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

lifefriend_007 2019-08-26 18:27 評論0 收藏0
IndexedDB 打造靠譜 Web 離線數據庫

摘要：設置為參數設置指定索引，并確保唯一性上面主要做了件事打開數據庫表新建，并設置設置打開數據庫表主要就是版本號和名字，沒有太多講的，我們直接從創建開始吧。打開注意事項檢查是否支持版本更新在生成一個實例時，需要手動指定一個版本號。在知乎和我在平常工作中，常常會看到一個問題：前端現在還火嗎？這個我只想說：隔岸觀火的人永遠無法明白起火的原因，只有置身風暴，才能找到風眼之所在 ——『秦時明...

孫吉亮 2019-08-22 17:25 評論0 收藏0
IndexedDB使用與出坑指南

摘要：在不指定的情況下，默認版本號為。具體示例如下在需要更新數據庫的模式時，需要更新版本號。此時我們指定一個高于之前版本的版本號，就會觸發事件。數據操作事務在中，我們也能夠使用事務來進行數據庫的操作。概述本文通過對IndexedDB的使用方法和使用場景進行相關介紹，對常見的問題進行解答。同時，因為MDN中的相關文檔缺乏相關邏輯性，所以不容易理解。本文將通過項目中常見的數據存儲和操作需求...

陳偉 2019-08-20 11:04 評論0 收藏0
深入了解瀏覽器存儲--從cookie到WebStorage、IndexedDB

摘要：優異的性能表現，有一部分原因要歸功于瀏覽器存儲技術的提升。是服務端生成，客戶端進行維護和存儲。當超過時，它將面臨被裁切的命運。此外很多瀏覽器對一個站點的個數也是有限制的。存入讀取數據保存的數據，以鍵值對的形式存在。前言隨著移動網絡的發展與演化，我們手機上現在除了有原生 App，還能跑WebApp——它即開即用，用完即走。一個優秀的 WebApp 甚至可以擁有和原生 App 媲美的功...

XGBCCC 2019-08-23 16:42 評論0 收藏0