angular如何缓存form表单信息

在Angular中，可以使用FormGroup和FormControl来管理表单数据，也可以通过使用本地存储(localStorage)来缓存表单数据。

以下是一个简单的例子，可以将表单数据存储在本地存储中：

1. 在表单组件中，定义一个FormGroup对象，并将其初始化为存储在本地存储中的值（如果存在）：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(localStorage.getItem('name')),
      email: new FormControl(localStorage.getItem('email')),
      phone: new FormControl(localStorage.getItem('phone'))
    });
  }

  onSubmit() {
    // Save form data to local storage
    localStorage.setItem('name', this.form.value.name);
    localStorage.setItem('email', this.form.value.email);
    localStorage.setItem('phone', this.form.value.phone);

    // Submit form data to server
    // ...
  }
}

2. 在表单提交时，将表单数据存储在本地存储中：

onSubmit() {
  // Save form data to local storage
  localStorage.setItem('name', this.form.value.name);
  localStorage.setItem('email', this.form.value.email);
  localStorage.setItem('phone', this.form.value.phone);

  // Submit form data to server
  // ...
}

3. 在表单组件中添加一个ngOnDestroy钩子函数，以确保在组件销毁时清除本地存储中的表单数据：

import { Component, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnDestroy {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(localStorage.getItem('name')),
      email: new FormControl(localStorage.getItem('email')),
      phone: new FormControl(localStorage.getItem('phone'))
    });
  }

  onSubmit() {
    // Save form data to local storage
    localStorage.setItem('name', this.form.value.name);
    localStorage.setItem('email', this.form.value.email);
    localStorage.setItem('phone', this.form.value.phone);

    // Submit form data to server
    // ...
  }

  ngOnDestroy() {
    // Clear form data from local storage
    localStorage.removeItem('name');
    localStorage.removeItem('email');
    localStorage.removeItem('phone');
  }
}

这样，当用户重新访问该页面时，表单数据将从本地存储中自动填充。