前端新手必读：IndexedDB全面指北

原创

已于 2024-03-20 12:22:33 修改 · 1.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-08-13 13:48:13 首次发布

本文详细介绍了IndexedDB，它是浏览器中的客户端数据库，可存储大量结构化数据。文中对比了它与LocalStorage、WebSQL的差异，阐述了基本概念、核心操作、事务管理等内容，还提及高级功能、最佳实践、浏览器兼容性及相关库，适用于现代Web开发数据存储需求。

大家好，我是星辰编程理财，今天介绍IndexedDB。

一、引言

1. 背景和用途

IndexedDB是一种在浏览器中使用的客户端数据库，它提供了一种存储和检索大量结构化数据的方式。与传统的Web存储技术（如LocalStorage和Cookies）相比，IndexedDB具有更强大的功能和更高的性能。

IndexedDB的背景可以追溯到HTML5的出现，它是HTML5规范的一部分。在过去，Web应用程序通常需要将数据存储在服务器上，然后通过AJAX等技术从服务器获取数据。这种方式存在一些问题，如网络延迟、可用性和安全性等。IndexedDB的出现解决了这些问题，使得Web应用程序能够在本地存储和处理大量数据，提高了应用程序的性能和用户体验。

2. Web开发中的重要性

在现代Web开发中，前端应用程序越来越复杂，需要处理大量的数据。传统的Web存储技术（如LocalStorage）虽然简单易用，但是对于大规模数据的存储和查询效率较低。而IndexedDB提供了一种强大的解决方案，可以高效地存储和检索大量结构化数据。

IndexedDB的重要性在于它可以使得Web应用程序具备离线访问和数据持久化的能力。它允许开发者在浏览器中创建和管理数据库，存储和检索数据，而无需依赖于服务器。这对于一些需要在离线状态下工作的应用程序（如日程安排、笔记应用等）非常有用。此外，IndexedDB还可以用于缓存数据，提高应用程序的性能和响应速度。

二、什么是 IndexedDB

1. 概述

IndexedDB是一种在浏览器中使用的客户端数据库，它提供了一种存储和检索大量结构化数据的方式。它是一种NoSQL数据库，采用键值对存储模型，可以存储任意类型的数据，包括对象、数组等。
IndexedDB的特点之一是它支持事务操作，这意味着可以在一个原子操作中执行多个数据库操作，保证数据的一致性。此外，IndexedDB还支持索引，可以通过索引进行高效的数据查询。

2. 对比LocalStorage、WebSQL

与LocalStorage相比，IndexedDB具有更高的存储容量和更好的性能。LocalStorage通常只能存储几MB的数据，而IndexedDB可以存储GB级别的数据。此外，LocalStorage只能存储字符串类型的数据，而IndexedDB可以存储任意类型的数据。

与WebSQL相比，IndexedDB是一种更为现代化和强大的解决方案。WebSQL是一种基于SQL的关系型数据库，但是它已经不再被推荐使用，因为它的规范已经停止更新，并且在某些浏览器中已经被移除。相比之下，IndexedDB是一种更加标准化和跨浏览器的解决方案，得到了广泛的支持。

3. 特点和优势

IndexedDB具有以下特点和优势：

强大的存储能力：IndexedDB可以存储大量的结构化数据，支持GB级别的存储容量。
高性能的数据检索：IndexedDB支持索引，可以通过索引进行高效的数据查询。
事务支持：IndexedDB支持事务操作，可以在一个原子操作中执行多个数据库操作，保证数据的一致性。
离线访问和数据持久化：IndexedDB可以使得Web应用程序具备离线访问和数据持久化的能力。
跨浏览器支持：IndexedDB得到了主流浏览器的广泛支持，可以在多个平台和设备上使用。

下面是一个简单的IndexedDB示例，用于存储和检索用户信息：

// 打开或创建数据库
var request = indexedDB.open('myDatabase', 1);

// 数据库打开成功的回调函数
request.onsuccess = function(event) {
   
   
  var db = event.target.result;
  
  // 创建一个事务
  var transaction = db.transaction(['users'], 'readwrite');
  
  // 获取对象存储空间
  var store = transaction.objectStore('users');
  
  // 添加数据
  var user = {
   
    id: 1, name: 'John Doe', age: 30 };
  var addUserRequest = store.add(user);
  
  // 添加数据成功的回调函数
  addUserRequest.onsuccess = function(event) {
   
   
    console.log('User added successfully');
  };
  
  // 查询数据
  var getUserRequest = store.get(1);
  
  // 查询数据成功的回调函数
  getUserRequest.onsuccess = function(event) {
   
   
    var user = event.target.result;
    console.log('User:', user);
  };
  
  // 关闭数据库
  db.close();
};

// 数据库打开失败的回调函数
request.onerror = function(event) {
   
   
  console.error('Failed to open database');
};

三、 IndexedDB 的基本概念

1. 数据库和对象存储空间

IndexedDB是一个基于事件驱动的数据库系统，它由多个数据库组成，每个数据库又包含多个对象存储空间（Object Store）。数据库可以理解为一个命名空间，用于存储相关的数据。对象存储空间则类似于关系数据库中的表，用于存储具有相同结构的对象。

在IndexedDB中，可以通过以下步骤来创建或打开一个数据库：

// 打开或创建数据库
var request = indexedDB.open('myDatabase', 1);

// 数据库打开成功的回调函数
request.onsuccess = function(event) {
   
   
  var db = event.target.result;
  // 对数据库进行操作...
};

// 数据库打开失败的回调函数
request.onerror = function(event) {
   
   
  console.error('Failed to open database');
};

2. 键值对存储模型

IndexedDB采用键值对存储模型，其中每个对象都有一个唯一的键（Key）和对应的值（Value）。键用于唯一标识对象，而值则是要存储的数据。可以将对象存储在对象存储空间中，并通过键来检索和操作数据。

在IndexedDB中，可以通过以下步骤来向对象存储空间添加数据：

// 创建一个事务
var transaction = db.transaction(['users'], 'readwrite');

// 获取对象存储空间
var store = transaction.objectStore('users');

// 添加数据
var user = {
   
    id: 1, name: 'John Doe', age: 30 };
var addUserRequest = store.add(user);

// 添加数据成功的回调函数
addUserRequest.onsuccess = function(event) {
   
   
  console.log('User added successfully');
};

3. 版本管理和升级

IndexedDB支持数据库的版本管理和升级。每个数据库都有一个版本号，用于标识数据库的结构和数据模型。当需要修改数据库结构或升级数据模型时，可以通过增加数据库的版本号来触发数据库的升级操作。

在IndexedDB中，可以通过以下步骤来升级数据库：

// 打开或创建数据库
var request = indexedDB.open('myDatabase', 2);

// 数据库升级的回调函数
request.onupgradeneeded = function(event) {
   
   
  var db = event.target.result;
  
  // 创建或升级对象存储空间
  if (!db.objectStoreNames.contains('users')) {
   
   
    var store = db.createObjectStore('users', {
   
    keyPath: 'i