Web Components 是一种可重用的、组件化的 web 开发模式，使得前端工程师可以更快速、更轻松地开发和维护 web 应用。而本地存储则在 web 应用中扮演着重要的角色，为用户提供更好的用户体验。IndexedDB 是 HTML5 新添加的本地存储标准，提供了一种异步的事务性数据访问 API，它的出现使得 web 应用可以更可靠、更快速地使用本地存储。在本文中，我们将详细讲解如何使用 IndexedDB 实现本地存储。
IndexedDB 简介
IndexedDB 是浏览器端的本地数据库，在现代浏览器中都支持。它提供了本地存储、事务性的数据访问等 API，使得 web 应用可以使用本地存储，保证了离线访问的可靠性和速度。IndexedDB 数据库由多个对象仓库组成，每个对象仓库可以存储相同类型的对象。IndexedDB 使用键值对存储数据，每个对象仓库可以根据不同的索引来快速查找数据。
使用 IndexedDB 实现本地存储
IndexedDB API 所提供的方法非常灵活，但是也相对复杂，我们可以按照如下步骤来实现简单的本地存储：创建数据库、创建对象仓库、添加数据、查询数据、更新数据、删除数据。
创建数据库
首先我们需要创建一个数据库，在 IndexedDB 中，数据库是由版本号和数据库名称组成的，如果你使用的是一个新的数据库名称，则会创建一个新的数据库，代码如下所示：
-- -------------------- ---- ------- ----- ------ - ------- ----- ------- - ---------------------- --- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -- --------------- - --------------- - ------------------------ -- ----------------- - --------------- - ------------------------ --展开代码
上述代码中我们使用 IndexedDB 的 open 方法来打开数据库，如果数据库不存在，在打开时会立即创建。同时我们也指定了数据库的版本号和名称。当数据库结构有改变时（例如：更新对象仓库、删除对象仓库等），会触发 onupgradeneeded 事件，我们可以在此事件中创建、更新对象仓库。
创建对象仓库
IndexedDB 中的数据存储在对象仓库中，我们需要创建一个新的对象仓库并指定一个 keyPath（键），以便于在后续的数据操作中进行数据检索：
-- -------------------- ---- ------- ----- ------ - ------- ----- ------- - ---------------------- --- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -- --------------- - --------------- - ------------------------ -- ----------------- - --------------- - ------------------------ --展开代码
在上述代码中，我们使用 IndexedDB 的 createObjectStore 方法创建了一个名为 myObjectStore 的新的对象仓库，并指定了对象的 keyPath 为 id。
添加数据
添加数据是 IndexedDB 中最常见的操作之一，我们可以使用对象仓库提供的 add、put 方法进行添加操作，add 方法只能添加不存在的数据，put 方法则可以添加新数据或更新已存在的数据。
-- -------------------- ---- ------- ----- ------ - ------- ----- ------- - ---------------------- --- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -- --------------- - --------------- - ------------------------ -- ----------------- - --------------- - ----- -- - -------------------- ----- ----------- - --------------------------------- ------------------------------------------ ----- ------ - - --- -- ----- -------- ------ -- -- ----- ------- - ------------------------ ----------------- - --------------- - ----------------------- -- --------------- - --------------- - ----------------------- -- --展开代码
在上述代码中，我们先打开数据库，然后在成功回调函数中，打开数据事务，并使用 objectStore.put 方法向 myObjectStore 数据库中添加新的数据。在添加数据时，我们需要确认数据是否已经存在，如果存在，则使用 put 方法更新数据，而不是添加新数据。
查询数据
查询数据是我们记录本地数据的原因之一，我们可以使用对象仓库提供的 get、getAll 等方法来查询数据：
-- -------------------- ---- ------- ----- ------ - ------- ----- ------- - ---------------------- --- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -- --------------- - --------------- - ------------------------ -- ----------------- - --------------- - ----- -- - -------------------- ----- ----------- - --------------------------------- ------------------------------------------ ----- ------- - ------------------- ----------------- - --------------- - ----- ------ - -------------------- -------------------- -- --------------- - --------------- - ----------------------- -- --展开代码
在上述代码中，我们使用 get 方法获取 key 为 1 的数据，当数据查找成功时，会通过回调函数返回查询结果。如果我们需要获取所有的数据，我们可以使用 getAll 方法。
更新数据
在数据的生命周期中，我们经常需要对数据进行更新操作，我们可以使用 put 方法来实现：
-- -------------------- ---- ------- ----- ------ - ------- ----- ------- - ---------------------- --- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -- --------------- - --------------- - ------------------------ -- ----------------- - --------------- - ----- -- - -------------------- ----- ----------- - --------------------------------- ------------------------------------------ ----- ------- - ------------------- ----------------- - --------------- - ----- ------ - -------------------- ------------ - --- ----- ------------- - ------------------------ ----------------------- - --------------- - ----------------------- -- --------------------- - --------------- - ----------------------- -- -- --展开代码
在上述代码中，我们先使用 get 方法获取 key 为 1 的数据，然后更新 price 属性，最后使用 put 方法更新数据。需要注意的是，在更新数据时需要使用 transaction。
删除数据
删除数据是我们记录本地数据的另一个原因，我们可以使用对象仓库提供的 delete 方法来删除数据：
-- -------------------- ---- ------- ----- ------ - ------- ----- ------- - ---------------------- --- ----------------------- - --------------- - ----- -- - -------------------- ----- ----------- - ------------------------------------- - -------- ---- --- ------------------------------- ------- - ------- ----- --- -- --------------- - --------------- - ------------------------ -- ----------------- - --------------- - ----- -- - -------------------- ----- ----------- - --------------------------------- ------------------------------------------ ----- ------- - ---------------------- ----------------- - --------------- - ----------------------- -- --------------- - --------------- - ----------------------- -- --展开代码
在上述代码中，我们通过对象仓库的 delete 方法删除 key 为 1 的数据。
总结
在本篇文章中，我们详细讲解了如何使用 IndexedDB 实现本地存储。IndexedDB 提供了强大的接口来实现本地存储，可以帮助我们解决 web 应用中的一些数据存储问题，并提高 web 应用的性能和可靠性。需要注意的是，在使用 IndexedDB 进行数据存储时，应该遵循事务处理的原则，保证数据操作的正确性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6590cabeeb4cecbf2d60ec4e
