PWA 应用中如何使用 IndexedDB 进行数据存储

随着 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