Laravel+JQuery多页表单输入的SessionStorage存储与回显实现问询

嘿，我来帮你搞定这个多页表单的sessionStorage存储与回显问题！下面是一套实用的实现方案，完全贴合你的需求：

一、核心思路梳理 #

咱们不用手动逐个写sessionStorage.setItem('1', input1)，可以利用jQuery的遍历功能批量处理输入框，而且用输入框的id或name作为存储的key，比数字编号更直观，后续维护也更方便。

二、分步实现代码 #

1. 存储输入值到sessionStorage #

你可以选择两种存储时机：实时监听输入变化存储（更稳妥，防止用户未点下一步就刷新），或者点击下一步时批量存储当前页数据。

实时存储方案

// 监听所有number类型输入框的变化，自动存到sessionStorage
$('input[type=number]').on('change', function() {
  const inputKey = $(this).attr('id'); // 也可以用name属性：$(this).attr('name')
  const inputValue = $(this).val();
  sessionStorage.setItem(inputKey, inputValue);
});

点击下一步时批量存储当前页

// 绑定下一步按钮点击事件
$('.next-btn').on('click', function() {
  // 遍历当前可见页面的number输入框，批量存储
  $.each($('.form-page:visible input[type=number]'), function() {
    const inputKey = $(this).attr('id');
    const inputValue = $(this).val();
    sessionStorage.setItem(inputKey, inputValue);
  });
  // 这里再加页面切换逻辑...
});

2. 从sessionStorage取回数据并回显 #

当切换页面（上一步/页面初始化）时，需要把对应页面的输入值从sessionStorage取出并赋值给输入框：

// 回显指定页面的输入值
function echoPageInputs(pageId) {
  $.each($('#' + pageId + ' input[type=number]'), function() {
    const inputKey = $(this).attr('id');
    const storedValue = sessionStorage.getItem(inputKey);
    // 如果有存储的数据，就回显到输入框
    if (storedValue !== null) {
      $(this).val(storedValue);
    }
  });
}

你可以在页面初始化时调用这个方法，也绑定到上一步按钮的点击事件中：

// 页面加载完成后，回显当前可见页面的输入值
$(document).ready(function() {
  const currentPage = $('.form-page:visible').attr('id');
  echoPageInputs(currentPage);
});

// 上一步按钮点击事件：切换页面后回显数据
$('.prev-btn').on('click', function() {
  const targetPage = $(this).data('target');
  $('.form-page').hide();
  $('#' + targetPage).show();
  echoPageInputs(targetPage);
});

3. 完整的分页表单示例（含页面切换） #

假设你的表单分页结构是这样的：

<div class="form-page" id="page1">
  <input type="number" id="age" name="age" placeholder="年龄">
  <button class="next-btn" data-target="page2">下一步</button>
</div>
<div class="form-page" id="page2" style="display:none;">
  <input type="number" id="height" name="height" placeholder="身高">
  <button class="prev-btn" data-target="page1">上一步</button>
  <button class="submit-btn">提交</button>
</div>

对应的完整JS代码：

$(document).ready(function() {
  // 初始化回显当前页数据
  const currentPage = $('.form-page:visible').attr('id');
  echoPageInputs(currentPage);

  // 实时存储输入框变化
  $('input[type=number]').on('change', function() {
    const inputKey = $(this).attr('id');
    sessionStorage.setItem(inputKey, $(this).val());
  });

  // 下一步按钮逻辑：存储当前页+切换页面+回显目标页
  $('.next-btn').on('click', function() {
    const targetPage = $(this).data('target');
    $('.form-page').hide();
    $('#' + targetPage).show();
    echoPageInputs(targetPage);
  });

  // 上一步按钮逻辑：切换页面+回显目标页
  $('.prev-btn').on('click', function() {
    const targetPage = $(this).data('target');
    $('.form-page').hide();
    $('#' + targetPage).show();
    echoPageInputs(targetPage);
  });
});

// 回显指定页面的输入值
function echoPageInputs(pageId) {
  $.each($('#' + pageId + ' input[type=number]'), function() {
    const inputKey = $(this).attr('id');
    const storedValue = sessionStorage.getItem(inputKey);
    if (storedValue !== null) {
      $(this).val(storedValue);
    }
  });
}

三、优化小技巧 #

• 如果表单字段很多，可以把所有数据打包成JSON对象存储，减少sessionStorage的key数量：

  // 批量存储为JSON
  const formData = {};
  $.each($('input[type=number]'), function() {
    formData[$(this).attr('id')] = $(this).val();
  });
  sessionStorage.setItem('formData', JSON.stringify(formData));
  
  // 取回解析并回显
  const storedData = JSON.parse(sessionStorage.getItem('formData') || '{}');
  $.each($('input[type=number]'), function() {
    const inputKey = $(this).attr('id');
    if (storedData[inputKey]) {
      $(this).val(storedData[inputKey]);
    }
  });
  

• 若需要持久化数据（关闭浏览器后不丢失），可以把sessionStorage换成localStorage，逻辑完全一致。

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