2024.10.03 기록

모브박스 - 영화예매 완료 페이지 작업 / 세션스토리지

[ 로컬스토리지 ] or [ 세션스토리지 ] 공통점

• 브라우저에서 데이터를 클라이언트에 저장하는 방식
• 키와 값은 반드시 문자열
• 제한 용량은 5MB 이상
• 오리진(도메인·포트·프로토콜)에 묶여있음

• 로컬스토리지
  ㄴ 기존의 쿠키보다 더 안전함.
  ㄴ 브라우저를 껐다 켜도 데이터가 남아있음.
  ㄴ 저장된 데이터는 탭, 창 전체에 공유됨.
  ㄴ 영구적으로 저장에 유리(ex.로그인 상태 유지)

• 세션스토리지
  ㄴ 로컬스토리지보단 제한적이기 때문에 자주 사용되진 않음.
  ㄴ 페이지 새로고침을 해도 남아있으나 탭, 브라우저를 종료하면 데이터 사라짐.
  ㄴ 데이터는 탭 간 공유되지 않음.(같은 페이지라도 다른 탭이면 데이터 공유X)
  ㄴ 일회성 조회 저장에 유리함 (ex.쇼핑 카트)

  ---

const reserveData = {
        ...isAllSelect,
        posterUrl: userPoster,
        seat: select
};
    
const completeBtn = () => {
        setIsSeatSelect(select)
        
        //세션스토리지 데이터 저장
        sessionStorage.setItem('reserve', JSON.stringify(reserveData));
        setTicketInfo(reserveData)
        
        moveNext();
}

seat(좌석선택)컴포넌트에서 complete(예매완료)컴포넌트로 넘어가면서
데이터를 다 합치고 세션스토리지로 저장했음.