如何实现页面刷新时自动保存输入内容，刷新后保留输入数值

嘿，这个需求其实挺常见的，用浏览器自带的存储API就能完美解决，下面给你两种实用的实现方案，还有针对多输入框、性能优化的补充技巧：

这个方案适合需要长期保留用户输入的场景，比如表单草稿这类需求。核心思路是：

• 监听输入框的input事件，实时把输入内容存入localStorage
• 页面加载完成后，从localStorage读取之前保存的内容，填充回输入框

代码示例 #

<!-- HTML部分 -->
<input type="text" id="persistentInput" placeholder="输入内容试试，刷新/重启浏览器都不会丢">

// JavaScript部分
const inputEl = document.getElementById('persistentInput');

// 页面加载时恢复输入内容
window.addEventListener('load', () => {
  const savedValue = localStorage.getItem('userInput');
  if (savedValue) {
    inputEl.value = savedValue;
  }
});

// 实时监听输入，保存内容到localStorage
inputEl.addEventListener('input', (e) => {
  localStorage.setItem('userInput', e.target.value);
});

如果只需要在当前浏览器会话中保留输入（比如临时填写的内容，关闭页面就不需要了），可以用sessionStorage，用法和localStorage几乎一致：

代码示例 #

<input type="text" id="sessionInput" placeholder="输入内容，关闭浏览器就会消失">

const inputEl = document.getElementById('sessionInput');

window.addEventListener('load', () => {
  const savedValue = sessionStorage.getItem('sessionUserInput');
  if (savedValue) {
    inputEl.value = savedValue;
  }
});

inputEl.addEventListener('input', (e) => {
  sessionStorage.setItem('sessionUserInput', e.target.value);
});

如果页面上有多个需要保存的输入框，或者想减少存储操作的频率，可以试试下面的方法：

1. 多输入批量保存 #

把所有输入框的值存在一个对象里，用JSON.stringify序列化后存入存储：

// 给需要保存的输入框统一加类名
const inputs = document.querySelectorAll('.save-input');

// 页面加载时恢复所有输入
window.addEventListener('load', () => {
  const savedInputs = JSON.parse(localStorage.getItem('allUserInputs')) || {};
  inputs.forEach(input => {
    if (savedInputs[input.id]) {
      input.value = savedInputs[input.id];
    }
  });
});

// 实时保存所有输入框数据
inputs.forEach(input => {
  input.addEventListener('input', () => {
    const inputData = {};
    inputs.forEach(inp => {
      inputData[inp.id] = inp.value;
    });
    localStorage.setItem('allUserInputs', JSON.stringify(inputData));
  });
});

2. 防抖优化存储频率 #

频繁的input事件会触发多次存储操作，加个防抖函数，等用户停止输入300ms再保存，能减少不必要的性能消耗：

// 防抖函数
function debounce(func, delay = 300) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 给输入事件绑定防抖后的保存函数
inputEl.addEventListener('input', debounce((e) => {
  localStorage.setItem('userInput', e.target.value);
}));

• localStorage和sessionStorage的存储上限大概是5MB，不要用来存储过大的数据
• 敏感信息（比如密码、银行卡号）绝对不能存在这里，因为存储内容是明文的，很不安全
• 如果用户手动清除浏览器缓存，保存的内容也会丢失

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