LocalStorage无法保存数据：页面刷新即登出的解决方法

你的问题出在组件初始化时的状态逻辑冲突：

• 组件挂载时，第一个useEffect尝试从LocalStorage读取数据设置状态，但此时状态的初始值是undefined，会立刻触发第二个useEffect。
• 第二个useEffect检测到状态为undefined，执行了removeItem操作，直接清空了LocalStorage里的所有认证数据，导致后续读取不到内容，刷新后就自动登出了。

修复方案： #

1. 给状态设置初始值，直接从LocalStorage读取

把状态的初始值设置为LocalStorage中的对应值，这样就不需要第一个useEffect来初始化状态，同时避免初始时触发删除操作：

// 初始化状态时直接从LocalStorage读取
const [authToken, setAuthToken] = useState(window.localStorage.getItem('authToken'));
const [authTokenType, setAuthTokenType] = useState(window.localStorage.getItem('authTokenType'));
const [username, setUsername] = useState(window.localStorage.getItem('username'));
const [userId, setUserId] = useState(window.localStorage.getItem('userId'));

// 只保留更新LocalStorage的useEffect
useEffect(() => {
  // 只有当状态有实际值变化时才更新，避免初始化时误删
  authToken !== null && (authToken 
    ? window.localStorage.setItem('authToken', authToken) 
    : window.localStorage.removeItem('authToken'));
    
  authTokenType !== null && (authTokenType 
    ? window.localStorage.setItem('authTokenType', authTokenType) 
    : window.localStorage.removeItem('authTokenType'));
    
  username !== null && (username 
    ? window.localStorage.setItem('username', username) 
    : window.localStorage.removeItem('username'));
    
  userId !== null && (userId 
    ? window.localStorage.setItem('userId', userId) 
    : window.localStorage.removeItem('userId'));
}, [authToken, authTokenType, userId, username]);

2. 优化主动登出逻辑

如果需要主动登出，不要依赖状态变为undefined触发删除，而是写专门的登出函数手动清空：

const handleLogout = () => {
  setAuthToken(null);
  setAuthTokenType(null);
  setUsername(null);
  setUserId(null);
  // 主动清空LocalStorage
  window.localStorage.removeItem('authToken');
  window.localStorage.removeItem('authTokenType');
  window.localStorage.removeItem('username');
  window.localStorage.removeItem('userId');
};

核心逻辑说明： #

• 状态初始值直接从LocalStorage读取，确保刷新页面时状态能正确初始化，不会触发误删除。
• 第二个useEffect增加判断，只有当状态从有值变为无值（或主动设置为null）时，才执行删除操作，避免初始化时的误操作。

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