localStorage vs. sessionStorage vs. cookie 차이점 정리

웹 애플리케이션을 만들다 보면 사용자의 로그인 상태를 유지하거나, 다크모드 같은 사용자 설정을 저장하는 등 다양한 상황에서 클라이언트 저장소를 활용하게 된다.
이 때, 자주 쓰이는 세 가지가 바로 localStorage, sessionStorage, cookie이다.

localStorage

: 브라우저에 영구적으로 데이터를 저장할 수 있는 저장소

• 사용자가 브라우저를 닫아도, 컴퓨터를 껐다 켜도 데이터는 그대로 남아있다.
• 예를 들어, 자동 로그인 기능이나 사용자 테마(다크모드/라이트모드)처럼 오래 기억해야 할 값을 저장할 때 자주 사용된다.
• 자바스크립트로 접근하기 매우 쉽고, setItem, getItem 메서드를 사용하면 문자열 형태로 데이터를 저장하거나 가져올 수 있다.
• 하지만, 이 저장소는 보안 설정이 따로 없기 때문에 XSS(스크립트 공격)에 취약하다.

// 저장
localStorage.setItem('token', 'abc123');

// 가져오기
const token = localStorage.getItem('token');

// 삭제
localStorage.removeItem('token');

sessionStorage

sessionStorage는 localStorage와 비슷하게 동작하지만, 중요한 차이점이 하나 있다.

• 현재 브라우저 탭이 열려 있는 동안만 유지된다.사용자가 페이지를 새로고침해도 데이터는 유지되지만, 탭을 닫으면 사라진다.
• 그래서 보통 로그인 중에만 필요한 데이터, 혹은 임시 폼 입력값, 몇 단계로 나뉜 UI의 현재 상태 같은 일시적인 정보를 저장할 때 사용된다.
• 보안도 localStorage와 마찬가지로 자바스크립트로 접근 가능하므로 XSS 공격에 주의해야 한다.

cookie

: 브라우저와 서버가 서로 정보를 주고받기 위해 사용되는 저장 방식

• 이전 두 저장소와 가장 큰 차이점은, HTTP 요청이 발생할 때마다 자동으로 서버에 전송된다.
• 예를 들어, 사용자가 로그인한 상태를 유지하고 싶을 때 서버는 쿠키에 인증 정보를 담아 클라이언트에 전달하고, 이후 모든 요청에 쿠키가 자동 포함된다.
• 쿠키는 다른 저장소에 비해 작은 용량 제한(약 4KB)을 가지고 있고, 만료 시간이나 보안 설정도 직접 지정해야 한다.
• 하지만, HttpOnly 속성을 설정하면 자바스크립트로 접근할 수 없게 되어 XSS 공격을 방어할 수 있고, Secure, SameSite 같은 옵션으로 CSRF 공격도 방지할 수 있어 보안 측면에서 강력하다.

---

정리

상황에 따라 저장소를 적절하게 선택하는 것이 중요한데,

1. 자동 로그인 기능처럼 브라우저를 껐다 켜도 유지되어야 하는 정보는 localStorage가 적합하다.

   하지만, 중요한 정보는 저장하면 안된다. 자바스크립트를 통해 누구나 접근할 수 있기 때문.

2. 만약 탭을 닫으면 자동으로 로그아웃되도록 하고 싶다면 sessionStorage가 적절하다.

   공용 컴퓨터에서 로그인한 뒤 실수로 창을 닫지 않았을 때, 자동으로 로그아웃되게 하려면 이 방식이 안전

3. 반대로 보안이 중요한 refreshToken 같은 정보는 절대 localStorage나 sessionStorage에 저장하지 말고 쿠키에 저장하는 것이 좋다.

   특히 HttpOnly 속성을 적용하면 자바스크립트로 접근할 수 없게 되어 보안성이 높아짐