如何为带data-in属性的目标输入框应用sessionStorage实现数据存储

原代码存在以下问题：

• 方法拼写错误：JS 中节点列表的遍历方法是驼峰格式forEach，代码中写的小写foreach无法执行
• 节点集合操作错误：querySelectorAll返回的是符合条件的元素集合，不能直接对整个集合设置value属性，需要遍历每个元素单独赋值
• 存储逻辑冲突：所有输入框共用同一个存储键input，会导致后续输入的内容覆盖之前的存储值，无法实现多输入框各自的数据持久化
• 元素选择冗余：重复查询全量input再过滤data-in属性，直接选择input[data-in]效率更高

修正后代码（多输入框独立存储场景） #

// 页面加载时读取存储内容回填
if (window.sessionStorage) {
  document.querySelectorAll('input[data-in]').forEach(input => {
    // 取每个input的data-in属性值作为独立存储键
    const storageKey = input.dataset.in
    const savedVal = window.sessionStorage.getItem(storageKey)
    if (savedVal) input.value = savedVal
  })
}

// 监听输入事件实时存储
document.querySelectorAll('input[data-in]').forEach(input => {
  input.addEventListener('input', () => {
    const storageKey = input.dataset.in
    window.sessionStorage.setItem(storageKey, input.value)
  })
})

如果你需要所有带data-in属性的输入框值完全同步、共享同一份存储数据，可以使用以下版本：

// 多输入框同步同值版本
const STORAGE_KEY = 'input_sync'
// 页面加载回填
if (window.sessionStorage.getItem(STORAGE_KEY)) {
  const syncVal = window.sessionStorage.getItem(STORAGE_KEY)
  document.querySelectorAll('input[data-in]').forEach(input => {
    input.value = syncVal
  })
}
// 输入存储+实时同步
document.querySelectorAll('input[data-in]').forEach(input => {
  input.addEventListener('input', () => {
    window.sessionStorage.setItem(STORAGE_KEY, input.value)
    // 同步所有同属性输入框的值
    document.querySelectorAll('input[data-in]').forEach(el => {
      if (el !== input) el.value = input.value
    })
  })
})

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