在Angular 4中，可以使用localStorage来缓存表单数据。以下是一个示例解决方案：

1. 首先，导入localStorage模块：

import { Injectable } from '@angular/core';

2. 创建一个服务来处理表单数据的缓存：

@Injectable()
export class FormCacheService {

  constructor() { }

  // 从localStorage获取表单数据
  getFormData(key: string): any {
    const data = localStorage.getItem(key);
    return JSON.parse(data);
  }

  // 将表单数据保存到localStorage
  setFormData(key: string, data: any): void {
    localStorage.setItem(key, JSON.stringify(data));
  }

  // 清除localStorage中的表单数据
  clearFormData(key: string): void {
    localStorage.removeItem(key);
  }
}

3. 在组件中使用该服务来缓存表单数据：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { FormCacheService } from './form-cache.service';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {

  myForm: FormGroup;
  formKey = 'myFormKey';

  constructor(private formCacheService: FormCacheService) { }

  ngOnInit() {
    // 创建表单
    this.myForm = new FormGroup({
      name: new FormControl(''),
      email: new FormControl('')
    });

    // 从缓存中获取表单数据
    const formData = this.formCacheService.getFormData(this.formKey);
    if (formData) {
      this.myForm.setValue(formData);
    }

    // 监听表单变化
    this.myForm.valueChanges.subscribe((data) => {
      // 将表单数据保存到缓存
      this.formCacheService.setFormData(this.formKey, data);
    });
  }

  // 提交表单
  onSubmit() {
    // 清除缓存中的表单数据
    this.formCacheService.clearFormData(this.formKey);
    // 处理表单提交逻辑
    // ...
  }
}

在上述示例中，我们创建了一个名为FormCacheService的服务来处理表单数据的缓存。在组件中，我们首先从缓存中获取表单数据，并在表单初始化时设置表单的初始值。然后，我们订阅表单的valueChanges事件，每当表单发生变化时，将表单数据保存到缓存中。最后，在提交表单时，我们清除缓存中的表单数据。

请注意，在这个示例中，我们使用了Reactive Forms来创建表单，但你也可以使用Template-driven Forms来实现相同的功能。