indexedDB入门

2024年5月13日 146次阅读 来源: devman

概述

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照样异常多的，这里只是简朴引见了最经常使用的几个操纵（个人认为^_^）。

参考文档

    原文作者：devman
    原文地址: https://segmentfault.com/a/1190000018141305
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞