如何在 Angular 5 中重新加载后保留服务数据

Posted 2023-03-13

【中文标题】如何在 Angular 5 中重新加载后保留服务数据

【英文标题】：How to persist service data after reload in angular 5

【发布时间】：2018-07-06 12:03:56

【问题描述】：

我有一个服务可以在组件之间传递数据，当被调用时它可以工作，但是当我重新加载服务时，数据会被重置。所以当我搜索重新加载时，内存被重置，所以即使在重新加载后不使用也有办法保留数据任何客户端存​​储？我很好奇的一件事是我可以使用 rxjs 来实现这一点，但我不确定这会有什么帮助？我害怕使用 localstorage，因为数据将主要是对象或数组，而不是用户 ID 或会话 ID。任何输入都会真的很有帮助。我已经制作了一个示例来帮助我。你可以在下面找到

https://stackblitz.com/edit/component-data-sharing-service

【问题讨论】：

你可以使用localStorage。根据您的评论，由于您有对象或数组，您可以将它们存储为字符串格式，并且在访问它们时，您可以将它们转换为相应的 JSON 格式。

@rohankangale 以前我使用 localstorage 但大对象被破坏了，这就是为什么？

在保存到本地存储之前，您是否将对象转换为字符串？

【参考方案1】：

“不使用客户端存储”是什么意思？您必须使用客户端存储将数据持久保存在客户端...

创建一个可以保存数据的单例共享服务。

像这样：

https://octoperf.com/blog/2016/03/29/singleton-service-using-angular2/

【参考方案2】：

您应该使用 localstorage/sessionstorage 或组件之间的共享服务。

您可以使用 JSON.stringify 存储信息（对象/数组）。如果您正在使用成为单例的共享服务，那么您可以跨任何组件访问。

【参考方案3】：

您可能想要使用sessionStorage 而不是localStorage。当用户关闭应用程序的选项卡时，sessionStorage 将被清除。另一方面，localStorage跨标签持续存在，并且只有在用户完全关闭浏览器时才会被清除。此外，localStorage 在 Chrome 中的隐身窗口之间共享（但不与主窗口共享）。所以，sessionStorage 会比 localStorage 更安全。