IndexedDB-浏览器端的数据库

在现代Web应用开发中，数据存储和管理至关重要。随着Web应用的复杂性增加，传统的存储解决方案如Cookies和LocalStorage已经无法满足需求。IndexedDB 作为一种高效的浏览器端结构化数据存储 API，逐渐受到开发者的青睐。

IndexedDB 概述

IndexedDB 是一个用于在浏览器中存储大量结构化数据的底层 API。它允许开发者将数据存储在用户的浏览器中，而无需依赖外部服务器。IndexedDB 提供了一种通过键值对方式存储数据的灵活解决方案。

"IndexedDB 是一种底层API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。
该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。"

浏览器兼容性：

存储解决方案比较

核心概念

• 数据库 （database） ：IndexedDB 的数据库是相关数据的容器，每个域名可以创建多个数据库。数据库有版本控制，结构修改（如新增或删除表、索引）只能通过升级版本完成。

• 对象仓库（object store） ：每个数据库包含若干个对象仓库，类似于关系型数据库的表。

• 事务（transaction） ：所有数据操作都在事务中进行，以确保数据的一致性和完整性。事务对象提供了error,abort,complete三个回调方法，监听操作结果。

  事务提供了三种模式：readonly、readwrite 和 versionchange。

  使用 readonly 或 readwrite 模式都可以从已存在的对象存储里读取记录。但只有在 readwrite 事务中才能修改对象存储。

  必须在 versionchange 事务中才能修改数据库的“模式”或结构（包括新建或删除对象存储、索引）（此功能在web workers中可用）。

• 版本（version） ：首次创建数据库时，其版本为整数 1。每个数据库一次只有一个版本；一个数据库不能同时存在多个版本。每次版本升级只能提升版本号，无法降级。

• 索引（index） ：索引用于加速数据检索。每个对象存储可以为不同属性建立索引。

• 游标（cursor） ：IDBCursor 对象， 游标用于遍历对象存储中的记录，支持从指定位置开始读取数据，并进行数据的批量操作。

特性

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它允许网页脚本创建和操作大量数据。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。IndexedDB 具有以下特点：

• IndexedDB 数据库存储键值对

  IndexedDB 通过对象存储保存数据，支持存储各种类型的数据。数据以键值对形式保存，每条记录都有独一无二的主键。

• IndexedDB 建立在事务数据库模型上

  IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

• IndexedDB API 大部分是异步的

  IndexedDB 操作时不会阻塞浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，阻塞浏览器。操作完成后，会收到 DOM 事件的通知，通过收到的事件类型会我们知道操作是成功还是失败。

• 非关系型数据库

  IndexedDB 不使用 SQL，而是通过索引查询生成游标来遍历数据集。

• IndexedDB 遵守同源策略

  IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

• 储存空间大

  IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

基本操作

IndexedDB的操作主要通过其核心API完成。以下是一些常用的操作：

• 打开数据库 ：使用 indexedDB.open() 方法打开或创建一个数据库。例如：

  const request = window.indexedDB.open(databaseName, version);
  request.onsuccess = function(event) {
    const db = event.target.result;
    console.log('Database opened successfully:', db);
  };
  request.onerror = function (event) {
    console.log("Database error: " + event.target.errorCode);
  };
  

  第一个参数是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。

  第二个参数是整数，表示数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。

  indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。

  如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。

    const db;
    request.onupgradeneeded = function (event) {
      db = event.target.result;
    }
  

• 新建数据库 ：可以在版本升级事件中创建对象存储：

  新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件

  request.onupgradeneeded = function (event) {
    db = event.target.result;
    const objectStore;
    if (!db.objectStoreNames.contains('todos')) {
      objectStore = db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });
    }
  }
  

• 添加数据 ：通过事务向对象存储中添加数据：

  const transaction = db.transaction(['todos'], 'readwrite');
  const store = transaction.objectStore('todos');
  const data = { id: 1, text: 'tod1' };
  const addRequest = store.add(data);
  
  addRequest.onsuccess = function() {
    console.log("Data added successfully:", data);
  };
  
  addRequest.onerror = function(event) {
    console.log("Error adding data:", event.target.errorCode);
  };
  

  新建数据时必须指定表名称和操作模式（"readonly"或"readwrite"）。如果没有为第二个参数指定任何内容，得到的是只读事务。

• 查询数据 ：可以使用 get() 方法从对象存储中获取数据：

  const transaction = db.transaction(['todos'], 'readwrite');
  const store = transaction.objectStore('todos');
  const getRequest = store.get(1);
  getRequest.onsuccess = function() {
    if (getRequest.result) {
        console.log("Data retrieved:", getRequest.result);
    } else {
        console.log("No data found for ID:", id);
    }
  };
  
  getRequest.onerror = function(event) {
      console.log("Error retrieving data:", event.target.errorCode);
  };
  

• 更新数据 ：更新数据要使用IDBObject.put()方法。

const update = () =>{
  const request = db.transaction(['todos'], 'readwrite')
    .objectStore('todos')
    .put({ id: 1, text: '新任务1'});

  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  request.onerror = function (event) {
    console.log('数据更新失败');
  }
}

update();

• 删除数据 ：更新数据要使用IDBObject.delete()方法。

const remove = () => {
  const request = db.transaction(['todos'], 'readwrite')
    .objectStore('todos')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
    request.onerror = function (event) {
    console.log('数据删除失败');
  }
}

remove();

• 索引： 使用对象存储空间的 createIndex() 方法创建索引。

  索引在 IndexedDB 中扮演着非常重要的角色，它们可以提高数据检索的效率和灵活性。索引允许你通过 特定属性或字段快速查找对象 。通过创建索引，可以在执行查询时避免全表扫描，从而 提高查询的速度 。索引会为相应的属性创建一个数据结构，使得根据该属性进行查找更加高效。

  
    const transaction = db.transaction(['todos'], 'readwrite');
    const store = transaction.objectStore('todos');
    // 创建索引
    objectStore.createIndex("nameIndex", "name", { unique: false });
  

• 游标 ：可以使用游标（Cursor）来 筛选和过滤数据。

  在 IndexedDB 中，没有像 SQL 中的 WHERE 条件语句那样直接的操作。但你可以使用游标（Cursor）来 筛选和过滤数据 ，实现类似于 WHERE 的操作。

  使用对象存储空间的 openCursor 方法打开一个游标。也可以使用索引对象的 openCursor 方法或对象存储空间的 openCursor 方法

  const transaction = db.transaction(['todos'], 'readwrite');
  const store = transaction.objectStore('todos');
  const request = store.openCursor();
 // 或者使用 const request = nameIndex.openCursor();
    request.onsuccess = function (event) {
      const cursor = event.target.result;
      if (cursor) {
        console.log('Id: ' + cursor.id);
        console.log('Text: ' + cursor.value);
        cursor.continue();
      } else {
        console.log('没有更多数据了！');
      }
    };

应用场景

1. 离线应用 ：使用 IndexedDB 存储用户的数据和应用的状态，用户即使在没有网络连接的情况下，也可以继续操作，数据会在恢复网络连接时自动同步。例如，离线笔记应用、离线任务管理器等。

2.渐进式 Web 应用（PWA）： IndexedDB 被用于存储应用程序的核心数据和用户的操作记录，使应用即使在离线或低带宽环境下也能正常运行。例如，离线地图、离线词典等应用。

3.高频率数据更新： IndexedDB 支持高频率的数据写入和读取操作，适合用于存储和更新实时数据。例如，社交网络的消息存储、在线聊天应用的历史消息存储等。IndexedDB 是一种在浏览器中提供的低级API，用于存储大量的结构化数据，包括文件/二进制大对象（BLOBs）。它是持久性、异步的，适合存储和查询大量数据。以下是 IndexedDB 的一些常见应用场景：