SessionStorage 是一种在浏览器中存储数据的方式，它的数据会在用户关闭浏览器窗口后自动清除。在 Angular 应用中，我们可以使用 SessionStorage 来存储一些临时的数据，比如用户登录状态、表单数据等。
本文将介绍如何在 Angular 应用中使用 SessionStorage，包括如何设置和获取数据，以及如何在组件之间共享数据。
设置和获取数据
在 Angular 应用中，可以通过 window.sessionStorage 对象来设置和获取 SessionStorage 中的数据。下面是一个示例：
// 设置 SessionStorage 中的数据
sessionStorage.setItem('key', 'value');
// 获取 SessionStorage 中的数据
const value = sessionStorage.getItem('key');上面的代码中，setItem 方法用于设置 SessionStorage 中的数据，第一个参数是数据的键名，第二个参数是数据的值。getItem 方法用于获取 SessionStorage 中的数据，它的参数是数据的键名，返回值是数据的值。
需要注意的是，SessionStorage 中只能存储字符串类型的数据，如果要存储其他类型的数据，需要先进行转换。比如，可以使用 JSON.stringify 方法将一个对象转换成 JSON 字符串，再存储到 SessionStorage 中；使用 JSON.parse 方法将存储在 SessionStorage 中的 JSON 字符串转换成对象。
在组件之间共享数据
在 Angular 应用中，组件之间共享数据是一种常见的需求。可以通过 Service 来实现数据共享。下面是一个示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------- ---- - ---
------------ ------- ------ ---- -
-------------- - ------
--------------------------- -----------------------
-
------------ -------- --- -
-- ---------------- -
------ ---------------
- ---- -
----- ----- - ----------------------------
-- ------- -
-------------- - ------------------
------ ---------------
- ---- -
------ -----
-
-
-
-上面的代码中，DataService 是一个 Service，它包含了 setData 和 getData 两个方法。setData 方法用于设置数据，它将数据存储在 Service 中，并将数据转换成 JSON 字符串，存储在 SessionStorage 中。getData 方法用于获取数据，它先从 Service 中获取数据，如果 Service 中没有数据，则从 SessionStorage 中获取数据，并将数据存储在 Service 中，以便下次获取时直接从 Service 中获取。
在组件中使用 DataService 来共享数据非常简单，只需要在组件的构造函数中注入 DataService，然后调用 setData 和 getData 方法即可。下面是一个示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -----------
--------- -
------ --------
------- ----------------------- -------------
------- ----------------------- -------------
-
--
------ ----- ------------ -
------------------- ------------ ------------ --
--------- -
------------------------------- ---------
-
--------- -
----- ----- - --------------------------------
-------------------
-
-上面的代码中，AppComponent 组件注入了 DataService，并在模板中定义了两个按钮，分别用于设置数据和获取数据。当用户点击设置数据按钮时，调用 setData 方法将数据存储到 SessionStorage 中；当用户点击获取数据按钮时，调用 getData 方法从 SessionStorage 中获取数据，并输出到控制台中。
总结
本文介绍了如何在 Angular 应用中使用 SessionStorage，包括如何设置和获取数据，以及如何在组件之间共享数据。使用 SessionStorage 可以方便地存储一些临时的数据，但需要注意数据类型的转换和存储方式的选择。使用 Service 可以方便地在组件之间共享数据，减少重复代码的编写，提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66161eb6d10417a2226029f8