在开发 Angular 应用时，很多场景都需要对数据进行本地存储。比如用户的登录状态、表单数据、用户的偏好设置等等。本文将会介绍 Angular 应用中如何进行本地数据存储，包括三种方案：使用 web storage、使用 IndexedDB 和使用第三方库。
使用 web storage
web storage 为我们提供了两个 API：LocalStorage 和 SessionStorage。它们都是用来存储字符串的键值对，并且存在于浏览器端。
LocalStorage 会一直存在，除非用户主动删除或浏览器自动清除缓存；而 SessionStorage 只会在当前会话中存在，一旦会话结束，数据也会被清除。
下面是一个使用 LocalStorage 的示例：
-- -------------------- ---- ------- ----- --- - --------- ----- ---- - - --------- ------ ---- -- -- -- ------ ------------ - ------------------------- ---------------------- -- - ------------ ----- ----- ---------- - -------------------------- -- ------------ - ----- ------ - ----------------------- -------------------- -- - --------- ------ ---- -- - -
使用 SessionStorage 也是类似的。
使用 IndexedDB
如果我们需要存储大量数据，或者需要灵活的查询、过滤、排序操作，那么使用 IndexedDB 会更加适合。
IndexedDB 的使用方式和传统的关系型数据库不同。它是一种非关系型数据库，它存储的是对象，而不是表格。同时，它支持事务，保证数据的一致性。
下面是一个使用 IndexedDB 的示例：
-- -------------------- ---- -------
----- ------ - -------------
----- --------- - ----------
----- ------- - -----
-------- ---------------- ---- ------------ -- ----- -
-- -----
----- ------- - -----------------------
--------------- - ------- ------ -- -
-- ----
--
----------------------- - ------- ---------------------- -- -
-- ---------------------
----- -- - ------------- -- --------------------------------
------------------------------- - ------- ---
--
----------------- - ------- ------ -- -
----- -- - ------------- -- --------------------------------
-------
--
-
-- ------
--------------- -- -
----- -- - ------------------------- -------------
----- ----- - --------------------------
----- ---- - - --- -- --------- ------ ---- -- --
----------------
---
-- ----
--------------- -- -
----- -- - ------------------------- ------------
----- ----- - --------------------------
----- ------- - -------------
----------------- - ------- ------ -- -
---------------------------- -- - --- -- --------- ------ ---- -- -
--
---使用第三方库
如果我们只是存储简单的数据，比如用户偏好设置、表单数据等，那么可以考虑使用一些第三方库来简化代码。比如 ngx-store，它提供了一个简单的 API 来存储和读取数据。
-- -------------------- ---- -------
------ - ---------------------- ------------------- - ---- -------------------
-----------
-------- ----------------------------------
---------- ---------------------
--
------ ----- --------- --
--------------
------ ----- ----------- -
------------------- -------- -------------------- --
---------- -
-- ----
-------------------------- - --------- ------ ---- -- ---
-- ----
----- ------ - ---------------------------
-------------------- -- - --------- ------ ---- -- -
-
-总结
本文介绍了在 Angular 应用中进行本地数据存储的三种方案：使用 web storage、使用 IndexedDB 和使用第三方库。选择哪种方案取决于具体需求，需要综合考虑数据量、查询操作等因素。在项目开发过程中，根据实际需求选择合适的存储方式，可以提高开发效率，减少不必要的麻烦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e246195b1f8cacd5d3850