如何借助sessionStorage通过外部JS实现同浏览器会话表单自动填充

步骤1：创建外部JavaScript文件 #

新建文件命名为form-autofill.js，写入以下代码，代码做了冗余逻辑优化，后续新增字段只需修改fieldList数组即可，无需重复写DOM操作逻辑：

// 配置所有需要填充的字段：值为sessionStorage中存储的键名
const fieldList = [
  'fname', 'lname', 'email', 'phone', 'start', 
  'streetname', 'suburb', 'state', 'postcode', 
  'skill', 'other', 'otherbox'
]

// 页面DOM加载完成后执行填充逻辑，避免找不到元素报错
document.addEventListener('DOMContentLoaded', function() {
  // 检测是否有已存储的整套表单数据，判断首个字段是否存在即可
  if (sessionStorage.getItem('fname') !== null) {
    fieldList.forEach(field => {
      const storageVal = sessionStorage.getItem(field)
      // 填充确认页纯文本展示元素
      const confirmEl = document.getElementById(`confirm_${field}`)
      if (confirmEl) confirmEl.textContent = storageVal
      // 填充带a_前缀的表单输入元素
      const prefixedFormEl = document.getElementById(`a_${field}`)
      if (prefixedFormEl) prefixedFormEl.value = storageVal
      // 填充无前缀的原生表单输入元素（比如示例中id为streetname的输入框）
      const rawFormEl = document.getElementById(field)
      if (rawFormEl) rawFormEl.value = storageVal
    })
  }
})

步骤2：引入外部JS文件 #

在你的HTML页面</body>闭合标签之前，添加以下代码引入外部JS，全程无内联JavaScript代码：

<script src="form-autofill.js"></script>

适配说明 #

• 确保你存入sessionStorage时使用的键名和fieldList里的字段名完全一致
• 如果你的表单输入框ID没有a_前缀，可以直接删除对应前缀的处理逻辑即可
• 逻辑默认在DOM完全加载后执行，不会出现找不到元素的空值报错

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