如何使用Local Storage存储表单数据实现刷新留存与跨页传递？

功能1：页面刷新后表格数据保留 #

修复点： #

• 新增页面加载时读取本地存储逻辑：页面初始化时读取localStorage中保存的表格结构和nextId值，直接渲染到表格内，同时更新当前nextId避免新增数据ID重复
• 修正productUpdate函数逻辑顺序：原来的代码先存储旧表格数据再修改表格，要先完成表格的新增/更新操作，再将最新表格内容存入localStorage
• 修正formClear函数的单选、复选框清空逻辑：不能直接给选中项设置val("")，要使用prop('checked', false)取消选中状态
• 修正onbeforeunload事件中的拼写错误：将$("#imge")改为$("#img")，避免图片字段存储失败
• 受浏览器安全限制，文件输入框无法直接存储文件本身，下述代码仅存储文件名称，若需要持久化文件内容需将文件转Base64后存储

对应修改代码： #

// 页面加载完成后执行
$(function() {
  // 读取存储的表格数据
  const savedTable = localStorage.getItem("tabledata");
  if (savedTable) {
    $("#productTable").append("<tbody></tbody>");
    $("#productTable tbody").html(savedTable);
  }
  // 读取存储的nextId，无值时默认1
  nextId = parseInt(localStorage.getItem("nextId")) || 1;
})

function productUpdate() {
  if ($("#updateButton").text() == "Update") {
    productUpdateInTable(activeId);
  } else {
    productAddToTable();
  }
  // 操作完表格后再存储最新数据，同时同步存储nextId
  localStorage.setItem("tabledata", $("#productTable tbody").html());
  localStorage.setItem("nextId", nextId);

  // 清空表单字段
  formClear();
  $("#productname").focus();
}

function formClear() {
  $("#productname").val("");
  $("#introdate").val("");
  $("#img").val("");
  // 修正单选框清空逻辑
  $("input[type='radio'][name='rate']").prop('checked', false);
  // 修正复选框清空逻辑
  $("input[type='checkbox'][name='check']").prop('checked', false);
  $("#role").val("");
}

window.onbeforeunload = function () {
  localStorage.setItem("name", $("#productname").val());
  localStorage.setItem("date", $("#introdate").val());
  // 修正拼写错误
  localStorage.setItem("image", $("#img").val());
  localStorage.setItem(
    "radio",
    $("input[type='radio'][name='rate']:checked").val() || ""
  );
  // 支持多复选框存储，转成JSON数组
  const checkedList = $("input[type='checkbox'][name='check']:checked").map((i, item) => $(item).val()).get();
  localStorage.setItem("check", JSON.stringify(checkedList));
  localStorage.setItem("role", $("#role").val());
};

功能2：提交表单后Page2.html加载展示数据 #

修复点： #

• 修正passvalues函数逻辑：不要先清空产品名称输入框，要将整个表格的所有产品数据转成JSON格式存入localStorage，支持多组产品数据传递
• 修正Page2的表格结构，预留tbody用于渲染多条产品数据，新增JS逻辑读取存储的产品列表循环渲染

对应修改代码： #

Page1的passvalues函数修改：

function passvalues() {
  // 获取所有表格行数据
  const productList = [];
  $("#productTable tbody tr").each(function() {
    const cols = $(this).children("td");
    productList.push({
      name: cols.eq(1).text(),
      date: cols.eq(2).text(),
      file: cols.eq(3).text(),
      gender: cols.eq(4).text(),
      currency: cols.eq(5).text(),
      role: cols.eq(6).text()
    })
  })
  // 存成JSON格式
  localStorage.setItem("productList", JSON.stringify(productList));
  return true;
}

Page2.html代码修改：

<body>
  <div class="row">
    <div class="col-sm-6">
      <table id="productTable" class="table table-bordered table-condensed table-striped">
        <thead>
          <tr>
            <th>产品名称</th>
            <th>引入日期</th>
            <th>文件</th>
            <th>性别</th>
            <th>货币符号</th>
            <th>角色</th>
          </tr>
        </thead>
        <tbody id="tableBody"></tbody>
      </table>
    </div>
  </div>
  <script>
    // 读取产品列表
    const productList = JSON.parse(localStorage.getItem("productList") || "[]");
    const tbody = document.getElementById("tableBody");
    // 循环渲染所有产品
    productList.forEach(item => {
      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${item.name}</td>
        <td>${item.date}</td>
        <td>${item.file}</td>
        <td>${item.gender}</td>
        <td>${item.currency}</td>
        <td>${item.role}</td>
      `;
      tbody.appendChild(tr);
    })
  </script>
</body>

内容的提问来源于stack exchange，提问作者Gaming With Shady Wolf