Как реализовать показ попапа через 3 секунды после захода на сайт с возможностью закрытия и запоминанием закрытия между сессиями?

Что проверяют

Знаете ли вы разницу между localStorage, sessionStorage и cookie и продумываете ли то, что не видно в демо: SSR, доступность, повторный показ, таймер при уходе со страницы. Следом часто спрашивают, как показать попап снова через месяц или после новой акции.

Как отвечать

• хранилище: «между сессиями» значит localStorage, он живёт до очистки данных сайта. sessionStorage умирает вместе с вкладкой, а cookie нужна, только если сервер сам решает, рендерить ли попап;
• что хранить: не строку "true", а объект с датой закрытия и версией кампании, например { closedAt, version: 3 }. Тогда легко показать попап снова через 30 дней или при новой акции;
• таймер: setTimeout(show, 3000) стартует после проверки флага. В React это useEffect с clearTimeout в функции очистки, иначе в SPA попап всплывёт уже на другой странице;
• доступ к хранилищу: чтение и запись в try/catch. При заблокированных данных сайта обращение к localStorage бросает исключение, и попап не должен ронять страницу;
• SSR: в Next.js и других фреймворках с серверным рендером localStorage читается только на клиенте, в эффекте, иначе будет ReferenceError на сервере или рассинхрон гидратации;
• разметка: нативный <dialog> с showModal() даёт фокус внутри окна, закрытие по Esc и неактивный фон. У кнопки закрытия aria-label, после закрытия фокус возвращается туда, где был.

Нюанс с таймером: в фоновой вкладке браузер притормаживает таймеры, и попап может появиться в момент возвращения. Если требование звучит как «три секунды на странице», учитывайте visibilitychange.

Где спотыкаются

Пишут флаг при показе, а не при закрытии, или наоборот, не уточнив требование. Спросите, считается ли закрытием клик мимо окна и переход по ссылке внутри попапа.

Хранят голое "true" без версии. Маркетинг просит показать новую акцию, а у половины пользователей попап заблокирован навсегда.

Делают попап обычным div с display: none без управления фокусом. Скринридер не узнаёт о появлении окна, а Tab уводит фокус на элементы под затемнением.