React.js本地存储记住我功能：退出后数据丢失求助

核心问题 #

你退出登录时大概率用了localStorage.clear()清空所有本地存储，导致“记住我”的用户名、密码也被一同删除。要解决这个问题，只需只删除会话相关的token，而非清空整个localStorage，同时规范localStorage的使用方式。

具体修改步骤 #

1. 规范“记住我”数据的存储与读取 #

用标准的localStorage.setItem()和localStorage.getItem()API操作，避免直接赋值：

修改状态初始化逻辑

const [username, setUsername] = useState(() =>
  localStorage.getItem("rememberMe_checked") === "true" 
    ? localStorage.getItem("rememberMe_username") || "" 
    : ""
);
const [password, setPassword] = useState(() =>
  localStorage.getItem("rememberMe_checked") === "true" 
    ? localStorage.getItem("rememberMe_password") || "" 
    : ""
);
const [isChecked, setIsChecked] = useState(() => 
  localStorage.getItem("rememberMe_checked") === "true"
);

修改登录提交时的存储逻辑

const handleSubmit = () => {
  // 处理记住我存储
  if (isChecked && username !== "") {
    localStorage.setItem("rememberMe_username", username);
    localStorage.setItem("rememberMe_password", password);
    localStorage.setItem("rememberMe_checked", "true");
  } else {
    // 取消勾选时删除存储的信息
    localStorage.removeItem("rememberMe_username");
    localStorage.removeItem("rememberMe_password");
    localStorage.removeItem("rememberMe_checked");
  }

  // 原有登录逻辑不变，注意修正initialValue的取值问题
  const data = new URLSearchParams();
  console.log(loginType);
  if (loginType === "username") {
    data.append("username", username); // 直接使用状态中的最新值，而非initialValue
    data.append("password", password);
    data.append("grant_type", "password");
  }

  setIsLoading(true);
  signin(data, loginType)
    .then((response) => {
      if (response?.code === 200) {
        console.log(response);
        localStorage.setItem(
          "accessToken",
          JSON.stringify(response.data.accessToken)
        );
        localStorage.setItem(
          "userSession",
          JSON.stringify(response.data.accessTokenExpiresAt)
        );
        window.location.reload();
      } else {
        toast.error(response.message);
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      setIsLoading(false);
    });
};

2. 修改退出登录逻辑 #

绝对不要用localStorage.clear()，只删除会话相关的token：

// 示例退出登录函数（根据你的实际代码调整）
const handleLogout = () => {
  // 仅删除会话数据，保留记住我的信息
  localStorage.removeItem("accessToken");
  localStorage.removeItem("userSession");
  // 跳转到登录页或执行其他退出操作
  window.location.href = "/login";
};

额外提醒 #

明文存储密码在localStorage存在安全风险，建议只存储用户名，密码不要持久化，或者对密码进行加密后再存储。

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