React中LocalStorage无法存储数据问题排查求助

常见错误点及排查方向 #

• 验证逻辑错误：检查账号密码的判断条件，是否用了严格相等===，有没有大小写匹配错误（比如写成Admin而非admin）。
• 表单默认行为未阻止：表单提交时如果没阻止默认刷新，页面会立即重载，导致LocalStorage存储操作被中断。
• LocalStorage存储格式错误：直接存储JS对象会被转成[object Object]，必须用JSON.stringify()序列化后再存入。
• 自动跳转逻辑时机错误：组件挂载时的判断逻辑没执行，或者没读取LocalStorage里的正确字段。

修正后的示例代码 #

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; // 假设使用react-router实现页面跳转

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  // 组件挂载时检查LocalStorage，存在正确数据则跳转首页
  useEffect(() => {
    const savedUser = localStorage.getItem('loggedInUser');
    if (savedUser) {
      const user = JSON.parse(savedUser);
      if (user.username === 'admin' && user.password === 'admin') {
        navigate('/home');
      }
    }
  }, [navigate]);

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认刷新行为，避免存储操作被中断
    // 验证账号密码
    if (username === 'admin' && password === 'admin') {
      // 序列化对象后存入LocalStorage
      localStorage.setItem('loggedInUser', JSON.stringify({ username, password }));
      navigate('/home');
    } else {
      alert('账号或密码错误');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="账号"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
      />
      <button type="submit">登录</button>
    </form>
  );
};

export default Login;

关键修复点说明 #

• 阻止表单默认提交：通过e.preventDefault()避免页面刷新，确保LocalStorage存储操作完成。
• 正确处理存储格式：用JSON.stringify()将用户对象转为字符串存入，读取时用JSON.parse()解析回对象。
• 挂载时执行跳转判断：在useEffect钩子中完成LocalStorage检查，保证页面加载时自动触发跳转逻辑。
• 严格相等判断：使用===避免类型转换导致的验证错误。

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