多步骤表单，阻止第一页清除输入

问：

我得到了一个多步骤表单，我想知道在填写第一个表单页的输入后，当我切换以从第二个表单页查看第一个表单页时，我该如何防止它清除。现在输入文本消失了。还是我应该以某种方式使用 localStorage？

https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Step1.vue:0-1188

<template >
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>First Name</label
        ><input
          name="name"
          v-model="firstName"
          placeholder="Your first name"
          class="form-control"
          required
        />
      </div>
      <div class="form-group">
        <label>Last Name</label
        ><input
          name="lastname"
          v-model="lastName"
          placeholder="Your last name"
          class="form-control"
          required
        />
      </div>
      <!-- @click.prevent="goToStep(2)" -->
      <button type="button" @click.prevent="nextStep" class="btn">Next step</button>
    </div>
    <Button />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  components: {
    Button,
  },
  methods: {
    nextStep() {
      this.$emit("next");
    },
  },
};
</script>