ng2-localstorage 是一个开源的 Angular 2+ 插件，用于实现本地存储。这个插件提供了一个简单易用的接口，可以让你轻松地在 Angular 2+ 中使用本地存储。在本文中，我们将介绍 ng2-localstorage 的使用方法，以及如何将它集成到你的项目中。
安装
在开始使用 ng2-localstorage 之前，你需要先安装它。你可以使用 npm 包管理工具来安装它：
npm install ng2-localstorage --save
使用
在使用 ng2-localstorage 之前，你需要在你的模块中先导入它：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------------ - ---- -------------------
-- ---
-----------
-------- -
----------------------------
------- ---------
------------ --------------
---
-- ---
--
-- ---
--
------ ----- --------- - -在以上示例代码中，我们在 AppModule 中导入了 LocalStorageModule，然后在 ngModule 的 imports 中添加了 LocalStorageModule.forRoot() 这个方法。这个方法之所以非常重要，是因为它用于配置 ng2-localstorage 模块。你需要传入两个参数，prefix 和 storageType：
- prefix: 用于命名你的 key 的前缀。
- storageType: 用于指定本地存储的类型（localStorage 或是 sessionStorage）。
API
外部要想使用 ng2-localstorage，需要注入 LocalStorageService，它包含以下 API：
-- -------------------- ---- -------
-------------
------ ------- ----- ------------------- -
------------------- --------------------
---
- -- --- ----------
- ------ --- - -----
- -------- -- --- -----
--
-------- -------- ----
---
- -------------
- ------ --- - -----
- ------ ----- - ------
--
-------- ------- ------ ----- -----
---
- ---------- --- ---
- ------ --- - -----
--
----------- -------- -----
---
- ------------- ---
- ------ --- - -----
- -------- ----- --------- -----
--
--------------- -------- --------
---
- ------
--
-------- -----
-示例
下面是一个例子，介绍如何使用 ng2-localstorage：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------- - ---- -------------------
------------
--------- -----------
--------- -------------
--
------ ----- ------------- -
-------- -------
------------------- -------- -------------------- --
---------- -
----------------------- -------
------------ - ------------------------
-
-在以上示例代码中，我们创建了一个 HomeComponent，然后注入了 LocalStorageService。在 ngOnInit 中，我们调用了 set 方法来设置一个名为 "foo" 的变量到本地存储中，并在 message 变量中存储了 "foo" 的值。因此，这个组件会在页面中显示 "bar"。
总结
通过以上示例，我们可以看出，ng2-localstorage 是一个非常有用的工具，可以轻松帮助我们在 Angular 2+ 中使用本地存储。在我们的项目中，我们可以通过 ng2-localstorage 来存储用户信息，以及其他重要的数据。如果你正在使用 Angular 2+，那么我强烈建议你尝试一下 ng2-localstorage，并将它集成到你的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571981e8991b448d4056