IndexedDB - 浏览器内容数据库
indexedDB 是一种浏览器内置的NoSQL数据库,它使用键值对存储数据,用于在客户端存储大量结构化数据。它支持离线应用程序和高效的数据检索,可以在 Web 应用程序中替代传统的 cookie 和 localStorage。
IndexDB是一种在浏览器中内置的NoSQL数据库,用于在客户端存储和检索数据。它提供了一种持久存储数据的方式,可以在离线状态下使用。
使用 indexedDB 需要以下步骤:
-
打开数据库:使用 indexedDB.open() 方法打开一个数据库,如果数据库不存在,则会创建一个新的数据库。
-
创建对象存储空间:使用 createObjectStore() 方法创建一个对象存储空间,用于存储数据。可以为每个对象存储空间设置一个名称和一个键路径,键路径用于指定对象存储空间中的每个对象的唯一标识符。
-
存储数据:使用 add() 或 put() 方法将数据存储到对象存储空间中。add() 方法用于向对象存储空间中添加新的数据,如果该数据已经存在,则会抛出错误。put() 方法用于向对象存储空间中添加或更新数据。
-
检索数据:使用 get() 或 getAll() 方法从对象存储空间中检索数据。get() 方法用于检索指定键路径的数据,getAll() 方法用于检索对象存储空间中的所有数据。
-
删除数据:使用 delete() 方法从对象存储空间中删除指定键路径的数据。
-
关闭数据库:使用 close() 方法关闭数据库连接。
需要注意的是,indexedDB 使用异步 API,需要使用回调函数或 Promise 处理返回结果。此外,indexedDB 只能在支持该 API 的浏览器中使用,需要检查浏览器是否支持 indexedDB API。
indexedDB 和 localStorage 的区别
indexedDB 和 localStorage 都是浏览器提供的客户端存储方案,它们之间的区别主要有以下几点:
-
数据存储方式:localStorage 存储的是字符串类型的数据,而 indexedDB 存储的是结构化数据。indexedDB 支持存储复杂的数据类型,例如对象、数组等,而 localStorage 只能存储字符串类型的数据。
-
存储容量:localStorage 的存储容量通常为 5MB 左右,而 indexedDB 的存储容量通常为几百 MB 或几 GB。indexedDB 可以存储大量的数据,适用于需要存储大量结构化数据的应用程序。
-
数据检索方式:indexedDB 支持基于索引的高效数据检索,可以通过索引快速查询数据。而 localStorage 只能遍历整个数据集合进行数据检索,效率较低。
-
事务支持:indexedDB 支持事务操作,可以确保数据的一致性和完整性。而 localStorage 不支持事务操作,无法保证数据的一致性和完整性。
-
浏览器支持:indexedDB API 在较新版本的浏览器中得到支持,而 localStorage API 在大多数浏览器中都得到支持。
综上所述,indexedDB 更适合存储大量结构化数据,并且支持高效的数据检索和事务操作;而 localStorage 更适合存储少量简单的字符串类型数据。
demo演示:
js
// 打开或创建一个名为"myDatabase"的数据库
const request = indexedDB.open('myDatabase', 1);
// 当数据库打开成功时触发
request.onsuccess = function(event) {
const db = event.target.result;
// 创建一个名为"myObjectStore"的对象存储空间
const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
// 添加一些数据到对象存储空间
const data = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' }
];
// 通过db.transaction('myObjectStore', 'readwrite')创建一个名为myObjectStore的对象存储空间的读写事务。这里的'readwrite'表示事务的模式,允许读取和写入数据。
const transaction = db.transaction('myObjectStore', 'readwrite');
// 通过transaction.objectStore('myObjectStore')获取到名为myObjectStore的对象存储空间的引用,以便后续对该对象存储空间进行操作,如添加、更新或删除数据。
const store = transaction.objectStore('myObjectStore');
data.forEach(function(item) {
store.add(item);
});
// 数据添加完成后,关闭数据库连接
transaction.oncomplete = function() {
db.close();
};
};
// 当数据库打开失败时触发
request.onerror = function(event) {
console.log('打开数据库失败');
};
keyPath
是IndexDB中用于定义对象存储空间中每个对象的唯一键的属性。这个键可以是任何一个对象中的属性,例如ID、名称或日期等。在创建对象存储空间时,可以通过指定keyPath
属性来定义唯一键。这样,在添加、更新或删除数据时,可以使用这个唯一键来引用和操作对象。