解决页面导航用户输入丢失问题：如何保留页面2的输入内容

嗨，这个问题我之前做项目时也碰到过，每次返回页面2都要重新填内容确实挺折腾人的。这里有几个实用的解决方案，你可以根据你的项目类型和需求来选：

这是最常用的方案，利用浏览器的localStorage或sessionStorage来保存用户输入。当用户在页面2的输入框里输入内容时，实时把值存到本地；页面2加载时，再从本地存储里读取并填充到输入框。

举个简单的原生JS实现例子：

// 监听输入框内容变化，实时保存到localStorage
document.getElementById('user-input').addEventListener('input', function(e) {
  localStorage.setItem('page2_input_value', e.target.value);
});

// 页面加载时，恢复之前保存的输入值
window.addEventListener('load', function() {
  const savedValue = localStorage.getItem('page2_input_value');
  if (savedValue) {
    document.getElementById('user-input').value = savedValue;
  }
});

• localStorage：数据会持久保存，哪怕关闭浏览器再打开也还在，适合需要长期记住的内容；
• sessionStorage：数据只在当前会话有效，关闭标签页就清除，适合临时保存的场景。

如果你的项目是Vue、React这类单页面应用（SPA），可以用框架自带的“缓存组件”功能，让页面2的实例不被销毁，从而保留输入状态。

比如Vue里可以用<keep-alive>包裹页面2的路由组件：

<router-view v-slot="{ Component }">
  <keep-alive include="Page2">
    <component :is="Component" />
  </keep-alive>
</router-view>

这样当你从页面2跳回页面1时，页面2的组件会被缓存起来，再次返回时直接复用原有实例，输入内容自然就保留了。

如果是传统多页面应用，这个思路不太好实现，除非用iframe嵌入页面2（但体验一般，不推荐优先选）。

如果输入内容不多且不敏感，可以在从页面2跳回页面1时，把输入内容作为URL参数带过去；当从页面1返回页面2时，再把参数传回来，页面2加载时读取参数填充输入框。

示例代码：

// 页面2跳回页面1时，携带输入参数
function goBackToPage1() {
  const inputVal = document.getElementById('user-input').value;
  // 编码避免特殊字符问题
  window.location.href = `Page1.html?input=${encodeURIComponent(inputVal)}`;
}

// 页面2加载时，读取URL参数恢复输入
window.addEventListener('load', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const savedVal = urlParams.get('input');
  if (savedVal) {
    document.getElementById('user-input').value = decodeURIComponent(savedVal);
  }
});

⚠️ 注意：这个方法不适合大量内容或敏感数据，因为URL长度有限，而且参数会暴露在地址栏里。

和本地存储类似，把输入内容存在Cookie里，页面加载时读取。不过Cookie的存储容量只有4KB左右，而且每次HTTP请求都会携带，适合少量非敏感数据的场景。

示例代码：

// 封装设置Cookie的函数
function setCookie(name, value, expireDays) {
  let expires = '';
  if (expireDays) {
    const date = new Date();
    date.setTime(date.getTime() + expireDays * 24 * 60 * 60 * 1000);
    expires = `; expires=${date.toUTCString()}`;
  }
  document.cookie = `${name}=${value || ''}${expires}; path=/`;
}

// 封装获取Cookie的函数
function getCookie(name) {
  const nameEQ = `${name}=`;
  const cookieArr = document.cookie.split(';');
  for (let i = 0; i < cookieArr.length; i++) {
    let c = cookieArr[i];
    while (c.charAt(0) === ' ') c = c.substring(1);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
  }
  return null;
}

// 监听输入变化，保存到Cookie
document.getElementById('user-input').addEventListener('input', function(e) {
  setCookie('page2_input', e.target.value, 1); // 保存1天
});

// 页面加载时恢复输入
window.addEventListener('load', function() {
  const savedVal = getCookie('page2_input');
  if (savedVal) {
    document.getElementById('user-input').value = savedVal;
  }
});

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