angular 2+在路由中保存上下文

Question

有可能保存页面的上下文吗？

我会解释 ：

我有一个包含组件的页面

/cars

该页面包含从$ http请求到服务器的汽车列表。

汽车1（点击查看详细信息）

汽车2（点击查看详细信息）

汽车3（点击查看详细信息）

汽车4（点击查看详细信息）

当我单击汽车时，我将重定向到新页面（所选汽车的详细信息）

/details/1 // 1 is the id of a car

如果我返回到汽车列表，该组件将再次发送$ http请求以获取汽车列表。

我的问题是，当我返回时是否有可能呈现先前的上下文而无需从服务器检索数据？

一种选择是使用服务来存储数据。

有什么更好的主意吗？

（Jira和GitLab正在使用此UX行为...）

谢谢 ！

Answer 1

通常建议使用共享服务来执行此操作。

一种选择是将其缓存在发出HTTP请求的服务中，以便您的应用程序的结构保持不变，只有服务发生更改（发出请求一次，缓存结果，然后始终返回缓存的值） ）。

如果在用户与应用交互时此数据可以更改，那么您将需要确定何时使缓存无效。

Answer 2

您可以将客户端数据保存在localstorage上 。

例如

localStorage.setItem('car', 'something');

它得到了广泛的支持。

确保对值进行字符串化：

localStorage.setItem(itemName, JSON.stringify(itemData));

您可以使用Angular2 @LocalStorage 。 它是一个小的Angular2 / typescript装饰器，使用HTML5'LocalStorage可以非常轻松地自动保存和恢复变量。