24時間は再表示しないUIを試してみたいのでやってみます。
考え方
- × を押した「時刻」を localStorage に保存
- ページ読み込み時に
- 保存データがない → 表示
- 24時間以内 → 表示しない
- 24時間経過 → 再表示
追加するキーと時間
const STORAGE_KEY = "welcomeModalClosedAt";
const HOUR_24 = 24 * 60 * 60 * 1000;何をしているのか
「最後に閉じてから24時間経っているか？」を判定している
- YES → モーダルを出す
- NO → 何もせず処理終了
①const STORAGE_KEY = "welcomeModalClosedAt";
localStorage に保存する 箱の名前の定義
なぜ文字列？
localStorage.setItem("キー", "値");
→ localStorage は 文字列しか保存できない②const HOUR_24 = 24 * 60 * 60 * 1000;
24時間をミリ秒で定義③const closedAt = localStorage.getItem(STORAGE_KEY);
起こりうる状態
・初回アクセス → null
・閉じた後 → "1700000000000"（文字列）④ 24時間以内かどうかの判定
if (closedAt && Date.now() - closedAt < HOUR_24) {
return;
}
④-1：if (closedAt)
・値があるか？
・null なら false
④-2：Date.now()
・今この瞬間の時刻（ミリ秒）
④-3：Date.now() - closedAt
・今 − 閉じた時刻= 経過時間（ms）
④-4：Date.now() - closedAt < HOUR_24
24時間より短い？
・true → まだ24時間経っていない
・false → 24時間以上経過
④-5：return;
・DOMContentLoaded の処理を 即終了
・モーダル表示処理まで行かない
&& は 「両方 true のときだけ実行する」ための記述
