sessionStorage 간 데이터 전송

jinjoo-jung·2024년 4월 30일

상태 관리

  • 웹 어플리케이션의 인증은 한 번 로그인 하고 나면 그 상태를 유지하고 있어야 한다.
    만약 로그인 후 인증 상태를 유지하지 않는다면, HTTP의 기본 특성 중 하나인 무상태성(stateless)때문에 클라이언트의 로그인 이후 요청은 매번 직전에 로그인을 요청해야 하고, 이는 클라이언트는 물론, 서버에게도 매우 고통스러운 일이 될 것 이다.

로컬 스토리지, 세션 스토리지, 쿠키는 웹 브라우저에서 데이터를 저장하는 다양한 방법

  • 로컬 스토리지: 로컬 스토리지에 저장된 데이터는 사용자가 명시적으로 삭제하지 않는 이상 계속 남아있는 영구적인 저장소이다. 데이터는 브라우저를 종료해도 유지된다.
  • 세션 스토리지 : 세션 스토리지에 저장된 데이터는 해당 섹션이 유지되는 동안에만 유효하다. 브라우저를 종료하거나, 탭을 닫으면 세션 스토리지에 저장된 데이터는 삭제된다.
    -> 세션 스토리지에 저장된 데이터도 로컬 스토리지와 마찬가지로 서버로 자동으로 전송되지 않는다. 필요한 경우 js를 사용하여 서버로 데이터를 전송해야 한다.
  • 쿠키 : 쿠키는 설정된 만료일까지 유효하다. 쿠키는 만료일이 지나면 자동으로 삭제되거나, 사용자에 의해 삭제될 수 있다.
    -> 쿠키는 HTTP 요청 시에 자동으로 서버로 전송된다. 쿠키는 서버와 클라이언트 간의 상태를 유지하는데 사용될 수 있다.

도메인 공유

  • 로컬 스토리지, 세션 스토리지 : 도메인에 한정되어 있어 다른 도메인에서 접근할 수 없다.
  • 쿠키 : 쿠키는 도메인 간에 공유될 수 있다. 설정된 도메인 및 경로에 따라 쿠키가 공유되는 경우가 있다. ex) 도메인 A에서 설정한 쿠키는 도메인 B에서도 접근할 수 있다.

세션 스토리지(sessionStorage)

1. 세션 스토리지 제한사항

  • 세션 스토리지는 로컬 스토리지와는 다르게 휘발성 특징을 가지기 때문에 창을 한 번 닫으면, 저장된 데이터는 모두 손실되고, 이 떄문에 보안상 인증 토큰은 세션 스토리지에 저장하는 것이 유리하다.
    하지만 세션 스토리지의 접근 가능영역이 현재 창에 국한되어 있기 때문에 새 창 혹은 새 탭을 열게 되면 사용자는 로그인을 다시 해야만 하는 단점을 가지고 있다.

2. 세션 스토리지 데이터 저장, 가져오기

  • 세션 스토리지는 브라우저 탭을 닫지 않는 한 데이터가 유지된다. 사용자가 같은 탭 내에서 라우터를 통해 다른 페이지로 이동하거나, 로딩 중 페이지로 넘어갈 때도 세션 스토리지에 저장된 데이터는 그대로 유지된다. 니는 사용자가 온보딩 과정 중에 다른 페이지로 이동해도 그동안 입력한 데이터를 계속 유지할 수 있게 해준다.

업로드중..

  • 이런 형식으로 세션스토리지에 저장한 데이터 값을 가지고 서버로 데이터를 전송할 수 있다.
profile
개인 개발 공부, 정리용 🔗

0개의 댓글