localStorage , sessionStorage

처음 웹앱 진입시 에만 스플래시 이미지를 보이고 싶었다. 그런데 아무리 해도 100번중 한번은 되고 99번은 안되는 문제가 발생했다.

결론은 localStorage가 삭제 되지 않았기 때문이다.

import classes from "./RootLayOut.module.css";

import { Outlet } from "react-router-dom";

import MainHeader from "../components/Mainheader";

import { useEffect, useState } from "react";
import Splash from "../components/Splash";

export default function RootLayOut() {
  const [splashName, setSplashName] = useState("");

  const [test, setTest] = useState(localStorage.getItem("splash"));

  useEffect(() => {
   

    if (test !== "end") {
      localStorage.setItem("splash", "start");
      console.log("타임 전 : ", localStorage.getItem("splash"));

      const timeoutId = setTimeout(() => {
        localStorage.setItem("splash", "end");
        setTest("end");
        console.log("타임 후 : ", localStorage.getItem("splash"));

        localStorage.removeItem("splash");
        console.log("삭제 후 : ", localStorage.getItem("splash"));
      }, 1200);

      return () => clearTimeout(timeoutId);
    }
  }, []);


  if (localStorage.getItem("splash") !== "end") {
    return <Splash />;
  }

  return (
    <>
      <MainHeader />
      <Outlet />
      <NoMobile />
    </>
  );
}

// 키에 데이터 쓰기
localStorage.setItem("key", value);
// 키로 부터 데이터 읽기
localStorage.getItem("key");
// 키의 데이터 삭제
localStorage.removeItem("key");
// 모든 키의 데이터 삭제
localStorage.clear();
// 저장된 키/값 쌍의 개수
localStorage.length;

> localStorage.getItem('name')
null
> localStorage.getItem('email')
null
> localStorage.setItem('email', 'test@user.com')
undefined
> localStorage.getItem('email')
"test@user.com"
> localStorage.setItem('email', 'test@admin.com')
undefined
> localStorage.getItem('email')
"test@admin.com"
> localStorage.removeItem('email')
undefined
> localStorage.getItem('email')
null

• 주의 : 오직 문자형(string) 데이터 타입만 지원함.

• 다만 로그인 정보같은 것들은 웹을 껐다 켜도 남아있게 하고싶으니 로컬에 저장하고 이런 스플래시 이미지들은 웹을 껐다 키면 다시 보이게 하고 싶으니 세션에 저장하도록 하자. 끝.

• 출처 : https://www.daleseo.com/js-web-storage/#%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%B2%AD%EC%86%8C