JS中localStorage使用异常：刷新后存储数据无法保留求助

你的代码仅在点击提交按钮时才会读取并展示localStorage的数据，但页面刷新后，按钮点击事件不会自动触发，因此页面加载时没有主动读取已存储的内容并更新DOM。

修改后的JS代码 #

const inputTxt = document.querySelector('#inp');
const btn = document.querySelector('#btn');
const dom = document.querySelector('.dom');

// 页面加载完成后，自动读取localStorage并恢复数据
window.addEventListener('DOMContentLoaded', () => {
  const storedValue = localStorage.getItem('inputX');
  if (storedValue) {
    dom.textContent = storedValue;
    inputTxt.value = storedValue; // 可选：把存储的值回填到输入框，提升体验
  }
});

btn.addEventListener('click', () => {
  const txtValue = inputTxt.value;
  localStorage.setItem('inputX', txtValue);
  dom.textContent = txtValue; // 直接使用输入值更新DOM，无需重复读取localStorage
});

关键修改说明 #

• 添加DOMContentLoaded事件监听：确保DOM完全加载后执行数据恢复逻辑，避免因元素未加载完成导致的操作失败
• 读取存储值时做判空处理：如果localStorage中没有inputX这个键（比如首次访问），不会执行无效的DOM更新
• 优化点击事件逻辑：直接使用输入框的值更新DOM，减少一次localStorage.getItem调用，提升性能

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