在前端开发中，我们经常需要把一些数据存储在用户浏览器中，以便在用户下次访问时快速读取。这时候 LocalStorage 和 SessionStorage 就派上用场了。本文将向您介绍如何在 Angular 中使用这两种存储方式。
什么是 LocalStorage 和 SessionStorage？
LocalStorage 和 SessionStorage 都是 HTML5 中新增的浏览器存储 API。它们都可用于客户端存储，而不需要向服务器发送请求。
LocalStorage 与 SessionStorage 存储的主要区别在于它们的作用域和生命周期：
LocalStorage 存储的数据可以在浏览器关闭后仍然存在，而 SessionStorage 存储的数据只能在当前会话关闭前存在。也就是说，如果用户关闭了浏览器，LocalStorage 存储的数据仍然会存在，但是 SessionStorage 的数据就会消失。
LocalStorage 和 SessionStorage 的作用域不同，LocalStorage 可以在同一域名下的所有页面共享，而 SessionStorage 只能在同一窗口或标签页共享。
如何在 Angular 中使用 LocalStorage 和 SessionStorage？
使用 LocalStorage 和 SessionStorage 的第一步是在 Angular 中引入相关模块：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- --------------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------------------
------- ---------
------------ ---------------
--
--
---------- ---
---------- --------------
--
------ ----- --------- - -可以看到，在 app.module.ts 中引入了 LocalStorageModule，还需要指定其前缀和存储类型。
新建一个 service，将设置、获取、移除等常用的 localStorage 方法封装起来。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------------- - ---- --------------------------
-------------
----------- ------
--
------ ----- -------------------------- -
------------------- -------------------- -------------------- - -
---
- --
- ------ --- --
- ------ ----- ------ --------------
--
-------- ------- ------ ---- -
--------------------------------- -------
-
---
- --
- ------ --- --
- ------- --------- ---- --- ------------
--
-------- ------- -------------- ----- --- -
----- ----- - ----------------------------------
------ ----- --- --------- -- ----- --- ---- - ----- - -------------
-
---
- --
- ------ --- --
--
----------- ------- -
-------------------------------------
-
-最后在任意组件中注入并使用该 service 即可：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------------- - ---- ----------------------------------
------------
--------- -----------
--------- -
------- ---------------------------------------------------
------- -------------------------------------------------------
----
------- ---------------------------------------------------
------- -------------------------------------------------------
-
--
------ ----- ------------ -
------------------- -------------------- --------------------------- - -
----------------- -
------------------------------------ -----------
-
------------------- -
------------------------------ -----------
-
---
- ------------------- ---- ------- ----------------
--
----------------- -
----- ----- - -------------------------------------
------------- -----------
-
------------------- -
----- ----- - -------------------------------
------------- -----------
-
-总结
以上就是如何在 Angular 中使用 LocalStorage 和 SessionStorage 的详细内容。在实际开发中，我们可以根据具体情况选择使用哪种存储方式，以便更好满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eefa98f6b2d6eab38f9c38