如何用JavaScript将HTML表单字段值存入localStorage？问题排查

我一眼就看出问题出在哪了——你的代码存在两个关键问题，导致数据无法正确存入localStorage：

1. 代码执行时机错误 #

你现在的JavaScript代码会在页面加载完成时立刻执行，这时候用户还没在输入框里填写任何内容，所以存入localStorage的都是空字符串。

2. 表单默认提交行为未阻止 #

表单的提交按钮默认会触发页面刷新，就算你把代码放到正确的时机，页面刷新后也会丢失当前状态，你自然看不到存储效果。

修复后的完整代码 #

HTML部分（小调整：修正类名笔误，给按钮明确提交类型） #

<form class="w3-container" id="form">
  <p>
    <label>Name</label>
    <input class="w3-input" type="text" id="name"> <!-- 修正了原代码的类名笔误：w3input → w3-input -->
  </p>
  <p>
    <label>Adress</label>
    <input class="w3-input" type="text" id="adress">
  </p>
  <p>
    <label>Number</label>
    <input class="w3-input" type="text" id="number">
  </p>
  <button class="w3-button w3-blue" type="submit">Submit</button>
</form>

JavaScript部分（绑定提交事件，阻止默认行为后存储数据） #

// 获取表单元素
const form = document.getElementById('form');

// 绑定表单提交事件，确保在用户点击提交时才执行存储逻辑
form.addEventListener('submit', function(event) {
  // 阻止表单默认的刷新提交行为，避免页面跳转丢失数据
  event.preventDefault();

  // 获取用户填写的输入框值
  const name = document.getElementById('name').value;
  const adress = document.getElementById('adress').value;
  const number = document.getElementById('number').value;

  // 将数据存入localStorage
  localStorage.setItem('name', name);
  localStorage.setItem('adress', adress);
  localStorage.setItem('number', number);

  // 可选：添加确认提示，验证存储结果
  alert('数据已成功存入localStorage！');
  // 也可以通过浏览器控制台查看存储内容
  console.log('存储的姓名：', localStorage.getItem('name'));
});

额外验证方法 #

你可以通过浏览器开发者工具（按下F12），切换到「Application」（部分浏览器叫「存储」）标签页，找到「Local Storage」选项，就能看到你存储的所有数据了。

内容的提问来源于stack exchange，提问作者Gustavo Metzler Pontes