一、localStorage & sessionStorage：最常用的原生方案 #

作为前端开发者，这俩绝对是解决这类问题的首选方案，完全可以放心用！先给你理清楚两者的区别，方便你根据场景选择：

• localStorage：数据会持久保存在用户浏览器中，除非主动清除（比如用户手动删除缓存，或者你通过代码清除），就算关闭浏览器、重启电脑再打开页面，数据依然存在。适合需要长期留存用户输入的场景。
• sessionStorage：数据仅存在于当前会话（当前标签页），一旦关闭标签页或浏览器，数据就会被清除。适合临时保存输入内容、不想让数据跨会话留存的情况。

原生JS代码示例 #

给输入框添加持久化功能的简单实现：

<input type="text" id="persistInput">

<script>
const input = document.getElementById('persistInput');
// 页面加载时，读取之前保存的值
window.addEventListener('load', () => {
  const savedValue = localStorage.getItem('userInput');
  if (savedValue) {
    input.value = savedValue;
  }
});

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

如果想用sessionStorage，只需要把代码里的localStorage替换成sessionStorage即可。

二、其他可选思路 #

如果你的场景有特殊需求，也可以考虑这些方案：

• Cookie：比较老派的方案，现在一般不推荐用来存输入内容——因为Cookie存储容量只有4KB左右，而且每次请求都会把Cookie发送给后端，没必要的话会增加请求体积。但如果项目已经在用Cookie处理用户状态，也可以凑合用，不过还是storage更合适。
• 后端临时存储：如果输入内容敏感，或者需要跨设备同步，可以让后端配合。比如用户输入时，定时把内容传到后端存到缓存（如Redis）或临时数据表，用户重新打开页面时，后端再返回数据填充输入框。这个适合复杂场景，但需要前后端协作开发。
• 前端框架/第三方表单库：如果你用React、Vue这类框架，很多表单库（比如React Hook Form、Vue Formulate）都自带输入持久化配置，不用自己写原生storage逻辑，省心不少。

总结一下：如果是简单的单页面输入持久化，localStorage/sessionStorage完全够用，也是行业内的常规操作，放心用就好！

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