想象一下，我们有一个场景，用户来到网站，必须查看带有一些信息的弹出式或模态，并且必须单击它以查看主要内容。
例如，同意条款和条件，阅读重要的警告或仅看到采取行动的呼吁。
但是，为了使它变得不那么烦人，我们只想向新用户展示一次并将其隐藏给返回的用户...
这可以通过LocalStorage轻松完成，我们可以在其中保留有关用户单击弹出窗口的数据。
它的工作方式将如下：
1：新用户来到网站
2：我们的组件渲染
3：我们检查了本地存储中是否有有关此用户已经单击弹出的数据
4：如果我们没有它，则在组件状态下，我们将数据displayPopUp设置为true
4a：一旦用户单击以关闭弹出窗口，我们将localstorage设置为popupclickd为true，并且状态displayPopUp为false
5：如果我们有它，我们将状态设置为displayPopUp为false
首先，在我们的React组件中，我们将导入模式：
// import useEffect and useState
import { useEffect, useState } from "react";
// import modal from material UI
import { Modal, Box } from "@mui/material";
记住使用
安装 @mui/材料npm i @mui/material
然后让我们声明一个内部模态的组件：
export default function Home() {
// state variable to decide if we should render pop-up
const [displayPopUp, setDisplayPopUp] = useState(true);
// when pop-up is closed this function triggers, we pass it to 'onClose' property of the modal
const closePopUp = () => {
// setting key "seenPopUp" with value true into localStorage
localStorage.setItem("seenPopUp", true);
// setting state to false to not display pop-up
setDisplayPopUp(false);
};
return (
<>
<div>
{/* conditional rendering, if displayPopUp is truthy we will show the modal */}
{displayPopUp && (
<Modal
open={true}
// once pop-up will close "closePopUp" function will be executed
onClose={closePopUp}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
{/* what user will see in the modal is defined below */}
<h1>Very important message</h1>
<h3>Just press OK button to never see it again</h3>
<button onClick={closePopUp}>OK</button>
</Box>
</Modal>
)}
</div>
{/* this is the main content of this page */}
<div>
<h1>The main content</h1>
</div>
</>
);
}
这将成功渲染页面，显示弹出窗口，在用户单击时将其关闭并将true保存在浏览器局部孔中的键seenPopUp中。
，但是现在每次我们刷新页面时，弹出窗口都会再次出现，尽管我们已经看到了它。
解决此问题，让我们添加最后一步：useEffect检查我们是否在localstorage中有seenPopUp：
// the useEffect to trigger on first render and check if in the localStorage we already have data about user seen and closed the pop-up
useEffect(() => {
// getting value of "seenPopUp" key from localStorage
let returningUser = localStorage.getItem("seenPopUp");
// if it's not there, for a new user, it will be null
// if it's there it will be boolean true
// setting the opposite to state, false for returning user, true for a new user
setDisplayPopUp(!returningUser);
}, []);
现在，整个组件的最终代码看起来像这样：
// import useEffect and useState
import { useEffect, useState } from "react";
// import modal from material UI
import { Modal, Box } from "@mui/material";
// write some style to pass into modal
const style = {
fontFamily: "Montserrat",
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 300,
height: 200,
border: "10px solid hotpink",
boxShadow: 24,
padding: 5,
textAlign: "center",
background: "#de4899"
};
export default function Home() {
const [displayPopUp, setDisplayPopUp] = useState(true);
// when pop-up is closed this function triggers
const closePopUp = () => {
// setting key "seenPopUp" with value true into localStorage
localStorage.setItem("seenPopUp", true);
// setting state to false to not display pop-up
setDisplayPopUp(false);
};
// the useEffect to trigger on first render and check if in the localStorage we already have data about user seen and closed the pop-up
useEffect(() => {
// getting value of "seenPopUp" key from localStorage
let returningUser = localStorage.getItem("seenPopUp");
// if it's not there, for a new user, it will be null
// if it's there it will be boolean true
// setting the opposite to state, false for returning user, true for a new user
setDisplayPopUp(!returningUser);
}, []);
return (
<>
<div>
{/* conditional rendering, if displayPopUp is truthy we will show the modal */}
{displayPopUp && (
<Modal
open={true}
// once pop-up will close "closePopUp" function will be executed
onClose={closePopUp}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
{/* in the line below we pass our custom styles object to the modal via 'sx' prop*/}
<Box sx={style}>
{/* what user will see in the modal is defined below */}
<h1>Very important message</h1>
<h3>Just press OK button to never see it again</h3>
<button onClick={closePopUp}>OK</button>
</Box>
</Modal>
)}
</div>
{/* this is the main content of this page */}
<div>
<h1>The main content</h1>
</div>
</>
);
}
et voil！
请记住，LocalStorage属于特定的浏览器，因此，如果用户在Safari中打开此页面，则下次他们在同一Safari中打开页面时，他们将不会看到弹出窗口。但是，如果他们将在另一个浏览器中打开页面，例如在Google Chrome中，他们将再次看到弹出窗口。
欢呼！