Блог

Я хотел создать страницу приветствия, которая исчезнет через несколько секунд, и я нашел на YouTube видео, в котором было что-то подобное, но оно больше похоже на загрузчик. Проблема в том, что мне нужно, чтобы эта страница приветствия появлялась только один раз, при первом посещении пользователем моего веб-сайта, а не каждый раз, когда пользователь перезагружает страницу. В следующем коде я использую движение фрейма для анимации страницы приветствия, которая автоматически исчезает, когда анимация заканчивается, но, конечно, она будет повторно отображаться при каждой загрузке страницы.

 export default function Home() { const [loading, setLoading] = useState(true);  useEffect(() =gt; {  loading  ? document.querySelector('body').classList.add('loading')  : document.querySelector('body').classList.remove('loading'); }, [loading]); return (  lt;AnimatePresencegt;  {loading ? (  lt;motion.div key="loader"gt;  lt;Loader setLoading={setLoading} /gt;  lt;/motion.divgt;  ) : (  

Как я могу этого достичь? Я думал о том, чтобы установить файл cookie или использовать localStorage, пока пользователь входит на страницу, и выполнить условный рендеринг с помощью этого, но это не сработало.

Каждый раз при отображении страницы вы должны знать, посещает ли пользователь вашу веб-страницу в первый раз или нет. Для этого вам нужно где-то хранить эту информацию.

Вы можете сохранить это в локальном хранилище или кэше.

Использование локального хранилища :

Когда пользователь посетил веб-страницу, храните информацию с:

 window.localStorage.setItem(name, content);  

Каждый раз при отображении страницы проверяйте, установлена ли информация с:

 window.localStorage.getItem(name);  

Пример :

Установите информацию в локальное хранилище:

 window.localStorage.setItem('visited', true);  

Посмотрите, посещали ли вы его раньше:

 let visited = window.localStorage.getItem('visited'); !visited amp;amp; Component ...