随着 PWA 技术的发展,越来越多的 Web 应用开始将自己打造成为 Progressive Web App。而作为一种可以离线缓存 App 的技术,IndexedDB 在 PWA 应用中使用越来越广泛。本文将介绍在 PWA 应用中如何使用 IndexedDB 进行数据存储的实践方法。
简介
IndexedDB 是一种在浏览器中存储结构化数据的 API,它采用了键值对的形式进行数据存储,并允许开发者以异步方式进行读取和写入操作。它的存储方式类似于浏览器的 LocalStorage,但有以下优点:
- 可以存储大量数据,储存容量比 LocalStorage 大得多,可以存储数百兆甚至数GB级别的数据;
- API 支持事务,数据操作更加可靠;
- 支持索引和游标,允许按照不同的键访问数据。
在 PWA 应用中,IndexedDB 可以被用来缓存数据,减少对服务器的访问,提升用户体验。
实践
在这里,我们将介绍在 PWA 应用中如何使用 IndexedDB 进行数据存储。
数据库的创建
在 IndexedDB 中,要使用数据库之前,必须先创建它。以下是创建数据库的方式:
--- ------- - ------------------------ ------ ---------
"database name"
:创建的数据库名称;version
:数据库的版本号。
该函数返回一个 IDBOpenDBRequest 对象,可通过该对象访问数据库。如果数据库不存在,那么将会自动创建一个新的数据库。
每一个 IndexedDB 的数据库都有一个版本号,当我们需要修改数据时,必须将数据库升级。
----------------------- - --------------- - --- -- - -------------------- -- ---------- --- ----------- - --------------------------------- --------- ------- --
在 onupgradeneeded
事件中,我们可以创建一个对象存储器。对象存储器是 IndexedDB 中存储数据的基本单位,每个对象存储器都有一个名称和对应的键。
数据的读取和写入
写入数据时,我们需要获得对象存储器,并创建一个事务。下面是一个写入数据的示例代码:
--- ------- - ------------------------ ------ --------- --------------- - --------------- - --------------------- ------ - - ------------------------ -- ----------------- - --------------- - --- -- - -------------------- --- ----------- - ----------------------------- ------------- --- ----------- - ------------------------------------- --- ---- - - --- -- ----- ------ -- --- ------- - ---------------------- ----------------- - --------------- - ----------------- --- ----- ---------------- -- --
读取数据时,我们也需要获得对象存储器,并创建一个事务。下面是一个读取数据的示例:
--- ------- - ------------------------ ------ --------- --------------- - --------------- - --------------------- ------ - - ------------------------ -- ----------------- - --------------- - --- -- - -------------------- --- ----------- - ----------------------------- ------------ --- ----------- - ------------------------------------- --- ------- - -------------------- ----------------- - --------------- - -------------------------------------- -- --
索引和游标
使用 IndexedDB 时,我们还可以通过设置索引和游标来提高数据操作的效率。
索引可以创建在对象存储器中的键上。我们可以通过以下代码来创建索引:
--- ----- - ------------------------------- ------- - ------- ----- ---
上面的代码将一个名为 name
的非唯一索引创建在 name
键上。
游标允许我们按照键的顺序访问存储在对象存储器中的数据。我们可以通过以下代码来创建游标:
--- ------- - ------------------------- ----------------- - --------------- - --- ------ - -------------------- -- -------- - -------------------------- ------------------ - --
上面的代码将打开一个游标,访问对象存储器中的数据,然后对每一个数据调用 console.log(cursor.value)
,最后通过 cursor.continue()
继续前进到下一个项,直到游标结束。
结论
通过本文的介绍,我们了解了 IndexedDB 在 PWA 应用中的基本使用方法。它可以用来缓存数据,提高系统的效率,避免多次访问服务器。因此,在未来的 Web 开发中,IndexedDB 一定会成为数据存储和离线 Web 应用的重要技术。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672483c22e7021665e13cec6