如何在页面跳转返回后保留翻转卡片（Flip Card）的状态

当前卡片翻转后跳转到其他路由，返回原页面时状态重置，核心原因是组件卸载后useState维护的状态会丢失。要保留翻转后的状态，需要将状态持久化到本地存储，具体实现如下：

修改FlippableCard组件 #

核心逻辑：

• 初始化状态时从本地存储读取之前保存的翻转状态
• 监听翻转状态变化，实时同步到本地存储
• 用卡片的title作为存储标识，确保状态与对应卡片绑定

修改后的代码：

import { useState, useEffect } from 'react';

function FlippableCard({ title, key }) {
  // 从localStorage读取初始状态，默认显示正面
  const [showFront, setShowFront] = useState(() => {
    const savedState = localStorage.getItem(`card_${title}_showFront`);
    return savedState !== null ? JSON.parse(savedState) : true;
  });
  const [color, setColor] = useState("#110781");

  // 监听showFront变化，同步到localStorage
  useEffect(() => {
    localStorage.setItem(`card_${title}_showFront`, JSON.stringify(showFront));
  }, [showFront, title]);

  return (
    <div className="scroll-remove">
      <div className="flippable-card-container">
        <CSSTransition in={showFront} timeout={300} classNames="flip">
          <Card
            title={title}
            value={key}
            onClick={() => {
              setShowFront((v) => !v);
              setColor("#A8A8A8");
            }}
          />
        </CSSTransition>
      </div>
    </div>
  );
}

代码说明 #

• 初始化状态：使用useState的函数式初始化，避免每次渲染重复读取本地存储；读取不到历史状态时，默认显示卡片正面。
• 同步状态到本地存储：通过useEffect监听showFront和title的变化，状态更新时立即存入localStorage，确保路由跳转返回或页面刷新后能恢复状态。
• 移除冗余代码：原代码中setShowFront((v) => !v)后重复调用setShowFront(false)会强制覆盖翻转逻辑，已删除该冗余操作。

额外优化建议 #

• 若希望关闭浏览器后自动清除状态，可替换localStorage为sessionStorage，后者会在会话结束后自动销毁数据。
• 多卡片场景下，用title作为存储键可保证各卡片状态独立，不会互相覆盖。

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