页面刷新后Local Storage未保存表单输入框值该如何解决？

问题原因 #

• 只给姓名字段绑定了输入监听事件，邮箱、留言字段的修改不会触发存储逻辑
• 取值逻辑写法错误：你存储时使用userDetails作为localStorage的键，取值时错误将JSON.parse(userDetails)作为键调用localStorage.getItem，无法正确读取存储内容
• 页面加载完成后没有主动读取localStorage中的存储值回填到输入框，自然刷新后内容丢失
• 没有处理表单提交后的存储数据清空逻辑，会导致提交成功后下次打开页面仍然显示旧内容

修复后的完整实现代码 #

// 1. 获取所有表单元素
const storeName = document.querySelector('input[type=text]');
const storeEmail = document.querySelector('input[type=email]');
const storeMessage = document.querySelector('.input-textarea');
const form = document.querySelector('.form');
// 初始化存储对象
let userDetails = {};

// 2. 页面加载时读取本地存储回填
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem('userDetails');
  if (saved) {
    userDetails = JSON.parse(saved);
    storeName.value = userDetails.name || '';
    storeEmail.value = userDetails.email || '';
    storeMessage.value = userDetails.message || '';
  }
});

// 3. 给所有输入框绑定输入监听事件，实时存储
storeName.addEventListener('input', (e) => {
  userDetails.name = e.target.value;
  localStorage.setItem('userDetails', JSON.stringify(userDetails));
});

storeEmail.addEventListener('input', (e) => {
  userDetails.email = e.target.value;
  localStorage.setItem('userDetails', JSON.stringify(userDetails));
});

storeMessage.addEventListener('input', (e) => {
  userDetails.message = e.target.value;
  localStorage.setItem('userDetails', JSON.stringify(userDetails));
});

// 4. 表单提交成功后清空本地存储
form.addEventListener('submit', () => {
  localStorage.removeItem('userDetails');
});

逻辑说明 #

• 页面加载完成后会优先读取localStorage中保存的用户输入内容，回填到对应输入框
• 三个输入框任意修改都会实时更新存储对象并同步到localStorage
• 表单提交后会自动清除存储的内容，避免下次访问页面显示无效历史输入

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