本文将介绍如何在 Angular 应用中使用 LocalStorage 进行数据存储。在开发一个前端应用时，通常需要在客户端进行一些数据的存储，这时候我们就可以使用 LocalStorage。
什么是 LocalStorage？
LocalStorage 是 HTML5 提供的一种本地存储数据的机制，与 Cookie 相比具有更大的存储容量，不会随着 HTTP 请求被发送到服务器端，可以在浏览器关闭后仍然保存数据等特点。LocalStorage 能够存储字符串类型的数据，也可以使用 JSON 格式进行存储。
在 Angular 中使用 LocalStorage
在 Angular 中，我们需要引入 ngx-webstorage-service 插件以及对应的依赖 @angular/common。该插件提供了对 localStorage 和 sessionStorage 的封装。
安装 ngx-webstorage-service 插件
使用以下命令安装该插件：
npm install ngx-webstorage-service --save
注册服务
在 app.module.ts 中注册服务，代码如下：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - -------------------- - ---- -------------------------
-----------
------------- -
------------
--
-------- -
--------------
--------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用服务进行数据存储
在组件中使用服务进行数据存储，代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- -------------------------
----- ----------- - ------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- --------------- -------------------- - -
------ -------------- ---- -
------------------------------------ --- ----- --------
-------------------------------------------------- -- ------- --- ----- ------
-
-在上述代码中，我们首先定义了一个常量 STORAGE_KEY 代表 LocalStorage 中数据的 key 值。在组件的构造函数中注入 LocalStorageService 服务，之后在 doSomething 方法中使用 set 方法存储数据，使用 get 方法获取数据。
使用 JSON 进行数据存储
LocalStorage 能够存储字符串类型的数据，也可以使用 JSON 格式进行存储。我们可以使用 JSON.stringify 和 JSON.parse 方法进行转换，代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- -------------------------
----- ----------- - ------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- --------------- -------------------- - -
------ -------------- ---- -
----- ------ - -
----- -----
---- --
--
------------------------------------ ------------------------
-------------------------------------------------------------- -- ------- ------ ----- ---- ---
-
-在上述代码中，我们首先定义了一个常量 STORAGE_KEY 代表 LocalStorage 中数据的 key 值。在组件的构造函数中注入 LocalStorageService 服务，之后在 doSomething 方法中使用 JSON.stringify 方法将对象转换为字符串存储在 localStorage 中，使用 JSON.parse 方法将字符串转换为对象进行读取。
总结
在本文中，我们学习了如何在 Angular 中使用 LocalStorage 进行数据存储。通过本文的学习，我们掌握了 ngx-webstorage-service 插件的安装和使用方法，以及如何使用 JSON 进行数据存储。我们可以将这些知识应用到自己的项目中，进行数据的本地存储。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483d1a948841e989430f41f