如何将首个表单输入的项目ID值持久化同步到其余所有关联表单

你的方案失效核心有3个问题：

• JS普通变量存储在当前页面的内存中，跳转新页面后变量会被完全重置，后续页面无法读取前序页面的变量值
• 事件绑定错误：submit是表单<form>元素的事件，你绑定到了按钮#data上，存储逻辑根本不会触发
• 赋值时机错误：$('.project_id').val(projectId)是页面加载时立即执行，此时用户还没输入项目ID，数组为空自然赋值失败

推荐用浏览器本地存储实现跨页面值传递，改动量极小：

1. 修改首个表单页的存储逻辑 #

给表单绑定提交事件，用户提交首个表单时把项目ID存入localStorage（同站点下所有页面可共享读取）：

// 替换你原来的submit绑定逻辑
$('form[action="/metadata"]').on('submit', function() {
  const pid = $('#pid').val().trim()
  if (pid) {
    localStorage.setItem('currentProjectId', pid)
  }
})

2. 后续所有表单页加自动填充逻辑 #

页面加载完成后自动读取存储的项目ID，填充到所有带project_id类的输入框中：

// 所有后续表单页的JS都添加这段初始化逻辑
$(document).ready(function() {
  const savedPid = localStorage.getItem('currentProjectId')
  if (savedPid) {
    $('.project_id').val(savedPid)
  }
})

• 若不需要跨标签页共享项目ID，可把localStorage替换为sessionStorage，关闭标签页后自动清除残留数据
• 整个5步表单流程全部提交完成后，可添加localStorage.removeItem('currentProjectId')清理存储，避免下次新建项目时残留旧ID
• 若要兼容浏览器禁用本地存储的场景，可改由服务端实现：首个表单提交后把项目ID存在服务端session中，后续页面渲染时直接给project_id输入框设置默认value即可，不依赖客户端JS生效

原来的addRow相关代码不需要修改，只要输入框被自动填充了值，原有逻辑就能正常读取到项目ID。

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