window加载时无法获取表单输入值存入localStorage的问题求助

问题原因 #

window.onload触发时，页面刚加载完成，用户还没来得及在输入框里输入内容，所以获取到的输入框value是空字符串。而按钮点击事件是用户输入完内容后触发的，自然能拿到输入的值。

解决方案 #

根据需求提供两种实用实现方式：

方式1：实时保存用户输入内容 #

监听输入框的input事件，用户每输入一个字符就自动把内容存到localStorage，还能在页面加载时恢复之前保存的内容：

window.onload = () => {
  const nameInput = document.querySelector('#name');
  // 页面加载时恢复之前保存的输入内容
  const savedName = localStorage.getItem('formInfo');
  if (savedName) {
    nameInput.value = JSON.parse(savedName);
  }
  // 监听输入事件，实时保存
  nameInput.addEventListener('input', () => {
    localStorage.setItem('formInfo', JSON.stringify(nameInput.value));
    console.log(JSON.parse(localStorage.getItem('formInfo')));
  });
};

方式2：表单提交时保存数据 #

如果只需要在用户提交表单时保存，监听表单的submit事件即可：

window.onload = () => {
  const form = document.querySelector('#contact-form');
  form.addEventListener('submit', (e) => {
    const name = document.querySelector('#name').value;
    localStorage.setItem('formInfo', JSON.stringify(name));
    console.log(JSON.parse(localStorage.getItem('formInfo')));
    // 若要保留表单默认提交功能，删除下面这行
    // e.preventDefault();
  });
};

关键说明 #

直接在window.onload里获取输入框值，拿到的是页面初始化时的默认空值，和用户后续输入的内容完全无关，这就是为什么你会得到空结果。

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