如何使用localStorage存储表单职位参考号并在另一页面表单只读展示

不需要创建3个独立的apply.html页面，仅用1个页面即可满足全部需求，具体实现方案如下：

不需要改动原有表单结构，只需要在页面底部</body>标签前插入以下原生JS代码即可：

// 绑定所有跳转apply的表单的提交事件
document.querySelectorAll('form[action="apply.html"]').forEach(formItem => {
  formItem.addEventListener('submit', function () {
    // 读取当前提交表单内的职位编号文本，去除首尾空格
    const jobRefNumber = this.querySelector('.cloudinformation h4').textContent.trim();
    // 存入localStorage
    localStorage.setItem('current_job_ref', jobRefNumber);
  })
})

逻辑说明：表单提交时自动识别当前表单内的固定职位编号文本，存入本地存储后再正常跳转到apply.html

同样在页面底部</body>标签前插入以下JS代码，实现自动填充并设置只读：

window.addEventListener('DOMContentLoaded', function () {
  // 读取本地存储的职位编号
  const targetRef = localStorage.getItem('current_job_ref');
  const refInput = document.getElementById('onlyletters');
  // 存在编号则填充并设为只读
  if (targetRef) {
    refInput.value = targetRef;
    refInput.readOnly = true;
    // 可选：添加灰色背景样式，提示用户该字段不可修改
    refInput.style.backgroundColor = '#eee';
  } else {
    // 可选：如果用户直接访问apply.html没有选择职位，跳转回职位列表页
    alert('请先选择要申请的职位');
    location.href = './你的职位列表页文件名.html';
  }
})

如果不需要限制用户直接访问apply.html，删除else分支的代码即可。

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