React中useState存储的数据在页面重新加载时丢失如何解决

• React 中 useState 存储的状态完全保存在浏览器当前页面的 JS 运行时内存中，页面重新加载时会销毁整个旧的运行上下文，内存里的所有数据都会被清空，原有存储的状态自然丢失。
• 你当前没有做任何状态持久化处理，页面重载后组件重新初始化，useState 会直接使用你传入的初始值 {name:"", password:""} 完成状态初始化，因此表现为之前填写的数据消失。

根据你的使用场景可以选择不同的方案：

• 方案1：浏览器本地存储（localStorage / sessionStorage） #

  这是最常用的轻量前端持久化方案，实现成本极低：
  1. 状态更新时同步将数据写入本地存储
  2. 组件初始化时优先从本地存储读取数据作为 useState 初始值，读取不到再用默认空值
     参考实现代码：

  // 初始化状态时优先读取本地存储
  const [credentials, setCredentials] = useState(() => {
    const savedCredentials = localStorage.getItem('loginCredentials');
    return savedCredentials ? JSON.parse(savedCredentials) : {name: "", password: ""};
  });
  
  // 封装状态更新方法，同步写入本地存储
  const handleSetCredentials = (newVal) => {
    setCredentials(newVal);
    localStorage.setItem('loginCredentials', JSON.stringify(newVal));
  };
  

  注意：密码属于敏感数据，不建议长期存储在localStorage中，避免被恶意脚本窃取造成安全风险。如果不需要跨浏览器会话保留数据，可以选择sessionStorage，关闭标签页后数据会自动清空。

• 方案2：服务端存储 #

  如果需要跨设备、跨终端保留数据，或者数据敏感级别较高，可以将数据提交到后端接口存储在数据库中，页面重新加载时调用后端接口拉取对应数据完成状态初始化。针对账号密码场景更推荐的做法是登录后获取后端下发的身份凭证（如token）存在本地，而不是直接存储明文账号密码。

• 方案3：URL参数存储 #

  仅适合非敏感、长度较短的状态，将数据序列化后拼接在URL的query参数中，页面加载时从URL解析参数初始化状态。该方案不适合账号密码这类敏感数据的存储。

内容的提问来源于stack exchange，提问作者Rahul Pratap Singh