indexedDB 在概念上与 HTML5 本地存储有何不同

客户端

indexedDB与HTML5本地存储在概念上有一些不同。HTML5本地存储是一种在客户端存储数据的机制，它使用localStorage和sessionStorage来实现数据的存储和访问。这两种机制都是基于键值对的方式进行数据存储，可以通过JavaScript来操作。而indexedDB则是一种更强大的客户端数据库系统，它提供了更复杂和高级的数据存储和查询功能。

indexedDB允许开发者创建多个数据库，并且可以在数据库中创建多个存储对象。每个存储对象都是一个存储数据的容器，类似于关系数据库中的表。存储对象可以定义多个索引，用于加快数据的查询速度。相比之下，HTML5本地存储只能存储简单的键值对数据，无法进行复杂的查询操作。

indexedDB还支持事务处理，这意味着在对数据库进行读写操作时，可以保持数据的一致性和完整性。开发者可以使用事务来执行一系列的数据库操作，如果其中任何一步操作失败，整个事务将会回滚，保证数据的完整性。HTML5本地存储则没有提供事务处理的机制。

此外，indexedDB还支持存储大量的数据，可以存储几乎无限大小的数据。HTML5本地存储则有一定的存储容量限制，通常在几MB到几十MB之间。

案例代码：

下面是一个使用indexedDB进行数据存储和查询的简单案例代码：

Javascript
// 打开或创建数据库
var request = indexedDB.open("myDatabase", 1);
// 数据库打开成功的回调函数
request.onsuccess = function(event) {
  var db = event.target.result;
  
  // 创建一个存储对象
  var objectStore = db.createObjectStore("customers", { keyPath: "id" });
  
  // 添加数据
  objectStore.add({ id: 1, name: "John" });
  objectStore.add({ id: 2, name: "Jane" });
  
  // 查询数据
  var transaction = db.transaction(["customers"]);
  var objectStore = transaction.objectStore("customers");
  var request = objectStore.get(1);
  
  request.onsuccess = function(event) {
    var customer = event.target.result;
    console.log(customer.name);  // 输出"John"
  };
};

以上代码首先打开或创建一个名为"myDatabase"的数据库。然后创建一个名为"customers"的存储对象，并指定"id"字段为主键。接下来，向存储对象中添加了两条数据。最后，通过事务和存储对象的get方法查询id为1的数据，并打印出其name字段的值。

indexedDB是一种功能更为强大的客户端数据库系统，它提供了复杂的数据存储和查询功能，支持事务处理，并且可以存储大量的数据。相比之下，HTML5本地存储则是一种简单的键值对存储机制，功能相对较弱。开发者可以根据具体需求选择合适的存储方式来满足应用程序的需求。