介绍
ngx-json-localstorage 是一个可以将 JSON 对象存储到本地存储中的 Angular 应用程序的 npm 包。它提供了一种简单的方式来进行本地存储，使得应用程序可以在不依赖任何服务器的情况下，通过本地储存的方式来持久化存储一些数据。
本文将会从如何安装 ngx-json-localstorage 开始，介绍使用 ngx-json-localstorage 的基本操作，最后介绍如何在一个实际应用程序中使用它。
安装
npm install --save ngx-json-localstorage
安装后，我们可以在我们的应用程序中引入它。
import { NgxJsonLocalStorageModule } from 'ngx-json-localstorage'; @NgModule({ imports: [ NgxJsonLocalStorageModule.forRoot() ], }) export class AppModule {}
使用
既然我们已经安装了 ngx-json-localstorage，并将其添加到了我们的应用程序中，我们就可以开始使用它了。这个库提供了一个名为 NgxJsonLocalStorageService 的服务来调用本地存储。
在组件中使用:
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------------------- - ---- ------------------------ ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- --------------- --------------------------- - - ------------ ------- ------ ---- - ---------------------------------- ------- - ------------ ------- - ------ ----------------------------------- - -展开代码
如上所示，我们可以导入 NgxJsonLocalStorageService，并将其注入到我们的组件中。然后我们可以通过 setObject 和 getObject 方法来储存或获取 JSON 对象。这里的 setObject 方法接收两个参数，一个是键值对中的键，另一个是要储存的值。getObject 方法接收一个参数，即键值对中的键。
示例:
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - -------------------------- - ---- ------------------------ ------------ --------- ----------- --------- - ------- ----------------------- ------------- ---- --- ----------- ---- -- --------- ---- ------- ----- -- ---------- ----------------------- -- ------ ----- ------------ - ------ ------------- - --- ------------------- --------------- --------------------------- - - --------- - ----- ------- - ----- - - ------------------ - --- ------------------------- -------------------------------------- ------------ - ----------- ---- - ---------- - -------------------------------------- -- --- - -展开代码
如上所示，我们可以在我们的组件中使用 setObject 方法来存储一个数组。在组件的 OnInit() 方法中，我们可以使用 getObject 方法来获取这个数组。这使我们的应用程序可以记住我们添加的项目，并在重新加载页面后加载它们。
结论
如您所见，ngx-json-localstorage 提供了一种简单的方式来进行本地存储，并且可以轻松地在 Angular 应用程序中使用。通过这个库，我们可以在客户端储存数据，并且在不依赖任何服务器的情况下持久化这些数据。希望本文介绍的使用方法对您有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a57
