LocalStorage

도메인 단위로 데이터를 영구적으로 저장할 수 있는 API

사용자가 브라우저를 닫고 다시 열어도 데이터 는 유지되며, 페이지 새로고침이나 탭 변경에도 영향을 받지 않는다.

테마, 언어 설정, 비로그인 상태의 장바구니 등 장기적으로 유지되어야 하는 데이터를 저장하는 데 적합하다.

일반적으로 문자열(String) 으로 저장되고 약 5MB 정도의 용량 제한이 있다.

서버와 자동으로 연동되지 않으며, XSS 공격에 취약하기 때문에 민감한 정보를 저장하지 않아야 한다.

SessionStorage

브라우저 탭 단위로 데이터를 저장한다.

같은 도메인이어도 탭을 새로 열면 별도의 저장 공간이 생성되며, 기존 탭의 저장소와는 공유되지 않는다.

탭을 닫는 즉시 데이터가 사라지기 때문에 임시 데이터나 사용자 인터페이스 상태를 저장하는 데 적합하다.

5MB 정도의 용량 제한이 있다.

브라우저 저장소 중 유일하게 클라이언트와 서버 간의 요청에 자동으로 포함되는 방식

쿠키는 HTTP 요청 시마다 서버로 자동 전송되기 때문에 인증 정보나 세션 식별자 등을 저장하는 데 매우 유용하다.

일반적으로 용량이 4KB 정도로 제한되며, 도메인과 경로에 따라 전송 범위를 세밀하게 조절할 수 있다.

Httponly 쿠키는 XSS 공격에 강하지만, 클라이언트 측에서 직접 토큰 값을 읽을 수 없기 때문에 SPA 구조에서는 불편함이 생길 수 있다.

이런 경우 localStorage를 사용하는 대신, Refresh Token 만 HttpOnly 쿠키에 저장 하고 Access Token은 메모리에서 관리하는 방식을 혼합하여 사용하는 전략도 있다.

브라우저 저장소 완전 정복: 로컬, 세션, 쿠키 사용 전략 | 요즘IT