如何使用 React 和 localStorage 在首次访问时将组件显示为弹出窗口？

Question

我想在用户第一次访问时在我的 React 站点的主页上显示一个弹出窗口（卡片组件）。一旦显示弹出窗口，我不想在后续访问中再次显示它。我计划使用

localStorage

来跟踪弹出窗口是否已经显示，但我不确定如何在 React 中正确实现这一点。

要求：

• 当用户第一次访问主页时，弹出窗口应该只显示一次。
• 我计划在

  localStorage

  中存储一个标志来确定是否应再次显示弹出窗口。
• 弹出窗口应显示为卡片组件，我希望它在用户单击关闭按钮时关闭。

我尝试过的：

我已经研究过使用

useEffect()

来检查组件安装时的

localStorage

，但我不确定如何根据存储的标志有条件地渲染弹出窗口。

预期行为：

• 首次访问时，会出现弹出窗口。
• 一旦用户关闭它，以后访问时就不会再次显示（使用 localStorage 来管理它）。

import React, { useState, useEffect } from 'react';
import PopupCard from '../Popup/PopupCard';

const HomePage = () => {
  const [showPopup, setShowPopup] = useState(false);

  useEffect(() => {
    const hasVisited = localStorage.getItem('visited');
    if (!hasVisited) {
      setShowPopup(true);
      localStorage.setItem('visited', true);
    }
  }, []);

  const handleClosePopup = () => {
    setShowPopup(false);
  };

  return (
    <div>
      <h1>Welcome to my website!</h1>
      {showPopup && (
        <PopupCard onClose={handleClosePopup} /> 
      )}
    </div>
  );
};

export default HomePage;

问题： 这种使用

localStorage

的方法是在 React 中首次访问时有条件地显示弹出窗口的最佳方法吗？在管理状态时是否有任何潜在的陷阱或更好的实践我应该注意，在这种情况下

localStorage

？

Answer 1

将 localStorage 用于这些目的是标准做法。请记住，它适用于设备，而不是用户。

我只能建议使用具有后备功能的 localStorage 解决方案（如 local-storage），因为 localStorage 并不总是可用。