时间戳

首页 > 解决方案 > 如何在刷新/更改页面上保存响应式表单数据？

angular - 如何在刷新/更改页面上保存响应式表单数据？

问题描述

哪个是将用户插入的数据保存在反应式表单中的最佳解决方案？

在我的 Angular 应用程序中，我有一个步进器，每个步骤都是一个响应式表单，当表单有效时，用户可以继续下一步或返回上一步并更改表单值。

当用户想要更改购物车内的项目或刷新页面时，问题就出现了，因为他在表单中填写了很多信息，在刷新或更改页面后插入反应式表单中的数据会很好将被保留在其中。

那么哪个是最好的方法呢？我应该去本地存储、cookies 还是其他东西？

标签： angular

解决方案

在这种情况下使用LocalStorage可能是持久数据的一个很好的解决方案。在组件中ngOnInit()检查LocalStorage是否有相关数据填写表格。

setLocalStorage()如果保持每个数据的持久性对您来说非常重要，您可以拥有一个将在表单更改事件上调用的函数，如下所示：

app.component.ts

ngOnInit() {
  this.myForm.valueChanges.subscribe( val => {
     this.setLocalStorage(val);
  });
}

setLocalStorage( newValue: any ): void {
  // Set Localstorage code here
}

否则，您可以调用setLocalStorage()步进器下一步按钮或表单提交事件或任何必需的事件。

推荐阅读