BASH交互输入优化：回退时如何预填用户历史答案

我之前刚好处理过一模一样的需求，给你分不同场景整理了可行的解决方案，直接就能上手：

1. 前端单页应用（SPA）场景 #

如果是用Vue、React这类框架做的单页应用，核心思路就是把用户的输入数据实时存在全局状态或本地存储里，回到起始页时再把这些数据拉出来填充表单：

• 表单输入时，实时同步数据到localStorage（简单场景）或者Vuex/Redux（复杂多步骤场景）
• 当用户点击“否”返回起始页时，页面初始化阶段读取存储的历史数据，赋值给对应的表单控件

举个Vue的极简示例：

<template>
  <div class="form-container">
    <input v-model="formData.name" placeholder="请输入姓名" />
    <select v-model="formData.gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <!-- 其他表单项 -->
    <button @click="showConfirm">确认内容是否正确？</button>
    <div v-if="isConfirming">
      <p>你填写的内容是否正确？</p>
      <button @click="confirmYes">是</button>
      <button @click="goBackFill">否，重新填写</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: { name: '', gender: '' },
      isConfirming: false
    }
  },
  mounted() {
    // 页面加载时读取本地存储的历史数据
    const savedData = localStorage.getItem('tempFormData')
    if (savedData) this.formData = JSON.parse(savedData)
  },
  watch: {
    // 实时监听表单变化，同步到本地存储
    formData: {
      deep: true,
      handler(newVal) {
        localStorage.setItem('tempFormData', JSON.stringify(newVal))
      }
    }
  },
  methods: {
    showConfirm() {
      this.isConfirming = true
    },
    confirmYes() {
      // 确认正确后清空存储，避免下次自动填充旧数据
      localStorage.removeItem('tempFormData')
      // 后续提交逻辑...
    },
    goBackFill() {
      this.isConfirming = false
      // 因为mounted已经读取过数据，直接切换视图即可，表单会自动填充
    }
  }
}
</script>

2. 传统后端渲染的多页面场景 #

如果是PHP、Java Spring这类后端渲染的多页面，核心是用Session存储用户输入，返回起始页时后端把数据填充到表单的value或selected属性中：

• 用户提交表单到确认页时，把数据存入Session
• 用户点击“重新填写”时，后端跳转回表单页，同时从Session取出数据渲染表单

举个PHP的简单示例：

<?php
session_start();

// 处理表单提交，存入Session
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['to_confirm'])) {
  $_SESSION['user_form'] = $_POST;
  header('Location: confirm.php');
  exit;
}

// 处理返回填写的请求
if (isset($_GET['go_back'])) {
  header('Location: form.php');
  exit;
}

// 渲染表单时从Session取数据
$formData = $_SESSION['user_form'] ?? [];
?>

<form method="POST" action="form.php">
  <input type="text" name="name" 
         value="<?= htmlspecialchars($formData['name'] ?? '') ?>" 
         placeholder="请输入姓名">
  
  <select name="gender">
    <option value="male" <?= ($formData['gender'] ?? '') === 'male' ? 'selected' : '' ?>>男</option>
    <option value="female" <?= ($formData['gender'] ?? '') === 'female' ? 'selected' : '' ?>>女</option>
  </select>

  <!-- 其他表单项 -->
  <button type="submit" name="to_confirm">确认内容是否正确？</button>
</form>

3. 通用注意事项 #

• 敏感数据（如身份证、银行卡号）别用localStorage，它是明文存储不安全，建议用Session或加密存储
• 用户确认内容正确后，一定要清空存储的历史数据，避免下次打开表单自动填充旧内容
• 多步骤表单建议每一步都实时保存数据，这样中途返回任何步骤都能恢复之前的输入

内容的提问来源于stack exchange，提问作者Tom