前端基础入门三大核心之HTML篇 —— IndexedDB详解

IndexedDB是一个在浏览器中存储大量数据的方式，它可以让你在客户端存储大量的数据，提供了一种机制可以在客户端存储大量的数据，包含文件的信息，并且可以进行查询。

IndexedDB的特点：

1. 存储空间大：IndexedDB 的存储能力基本上是没有上限的，只与用户磁盘可用空间有关。
2. 存储内容多样：不仅可以存储字符串，还可以存储二进制数据（比如图片、JavaScript对象）。
3. 异步操作：IndexedDB 操作都是异步的，不会像localStorage一样阻塞浏览器，因此可以同时进行多个操作。
4. 支持事务：IndexedDB 支持事务（transaction），可以在一个事务内部执行多个操作，只要有一个操作失败，其它的操作都会回滚。
5. 同源限制：IndexedDB 也遵循同源政策，每个数据库都只能由创建它的网页域访问。

IndexedDB的使用步骤：

1. 打开数据库
2. 创建或者打开对象存储空间（即创建或者获取表）
3. 创建事务
4. 创建操作请求（即创建、读取、更新、删除数据的语句）
5. 执行操作请求并处理结果

下面是一个简单的使用IndexedDB的例子：

// 打开或创建数据库
var request = window.indexedDB.open('MyDatabase', 1);
 
// 数据库升级时触发
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    // 如果没有这个对象存储空间，则创建
    if (!db.objectStoreNames.contains('MyObjectStore')) {
        var objectStore = db.createObjectStore('MyObjectStore', { keyPath: 'id' });
    }
};
 
// 数据库打开成功时触发
request.onsuccess = function(event) {
    var db = event.target.result;
    // 创建事务
    var transaction = db.transaction(['MyObjectStore'], 'readwrite');
    // 获取操作请求
    var objectStore = transaction.objectStore('MyObjectStore');
    // 添加数据
    var addRequest = objectStore.add({ id: 1, name: 'John Doe' });
    addRequest.onsuccess = function(event) {
        console.log('Data added');
    };
};
 
// 错误处理
request.onerror = function(event) {
    console.log('Database error: ' + event.target.errorCode);
};

在这个例子中，我们首先尝试打开一个名为'MyDatabase'的数据库，如果数据库不存在，则会创建这个数据库。在数据库升级时，我们检查是否存在名为'MyObjectStore'的对象存储空间，如果不存在，则创建这个存储空间。然后，在数据库打开成功时，我们创建一个事务，并在这个事务中对'MyObjectStore'进行添加数据的操作。最后，我们处理了可能发生的错误。