Local Storage, Session Storage, Cookie 사용 용도와 차이점 정리

웹 서비스를 사용하다 보면 로그인 상태가 유지되거나, 다크 모드 설정이 저장되거나, 장바구니에 담은 상품이 그대로 남아있는 경우가 있다.
이러한 기능은 브라우저가 데이터를 저장하기 때문에 가능하다.
브라우저에서 데이터를 저장하는 대표적인 방법은 Local Storage, Session Storage, Cookie세가지가 있다.
비슷해 보이지만 저장되는 위치와 사용 목적이 모두 다르기 때문에 상황에 맞게 사용하는 것이 중요하다.
이번 글에서는 각각이 왜 필요한지부터 사용 방법, 차이점, 실무에서는 언제 사용하는지까지 알아보자.

---

브라우저엔 왜 데이터를 저장할까?

웹 페이지는 기본적으로 새로고침하거나 브라우저를 종료하면 JavaScript에서 관리하던 데이터가 모두 사라진다.
예를 들어 사용자가 다크 모드를 선택했다고 가정해 보자.

사용자
 ↓
다크 모드 선택
 ↓
페이지 새로고침
 ↓
기본 모드로 다시 변경

매번 이런 일이 발생한다면 사용자 경험은 매우 좋지 않을 것이다.
그래서 브라우저는 데이터를 저장할 수 있는 공간을 제공한다.
대표적인 저장 방식

• Local Storage
• Session Storage
• Cookie

 

---

Local Storage

Local Storage는 브라우저에 데이터를 반영구적으로 저장하는 저장소이다.
저장한 데이터는 브라우저를 종료하거나 컴퓨터를 재부팅해도 삭제되지 않는다.
사용자가 직접 삭제하거나 JavaScript에서 삭제하기 전까지 계속 유지된다.

언제 사용할까?
다음과 같은 정보들을 저장할 때 많이 사용한다.

• 다크 모드
• 언어 설정
• 최근 본 상품
• 자동 저장
• 검색 기록

로그인이 풀려도 상관없는 사용자 설정 정보를 저장하기에 적합하다.

---

사용 방법

데이터 저장

localStorage.setItem("theme", "dark");

데이터 조회

const theme = localStorage.getItem("theme");

console.log(theme);
// dark

데이터 삭제

localStorage.removeItem("theme");

전체 삭제

localStorage.clear();

---

Session Storage

Session Storage는 브라우저 탭(Session)이 유지되는 동안만 데이터를 저장하는 저장소이다.
탭을 닫으면 저장된 데이터가 모두 삭제된다.
브라우저를 새로 열면 기존 데이터는 존재하지 않는다.

언제 사용할까?

• 회원가입 진행 단계
• 결제 진행 중 정보
• 일회성 입력값
• 새로고침 시 유지되어야 하는 데이터

예를 들어 회원가입이 3단계라고 가정해 보자.

1단계 입력
↓
2단계 이동
↓
새로고침
↓
입력 내용 유지

이런 경우 Session Storage를 사용하면 사용자가 다시 입력하지 않아도 된다.
하지만 탭을 닫으면 정보는 사라진다.

---

사용 방법

Local Storage와 API는 동일하다.

sessionStorage.setItem("name", "Kim");

const name = sessionStorage.getItem("name");

sessionStorage.removeItem("name");

sessionStorage.clear();

---

Cookie

Cookie는 브라우저에 저장되면서 HTTP 요청과 함께 서버로 자동 전송되는 작은 데이터이다.
Local Storage와 가장 큰 차이점은 바로 이 부분이다.
Local Storage와 Session Storage는 브라우저에서만 사용하는 데이터이다.
반면 Cookie는 서버도 함께 사용할 수 있다.

왜 Cookie가 필요할까?
사용자가 로그인을 했다고 가정해 보자.
로그인 요청을 보낸 후 다음 페이지로 이동하면 서버는 사용자가 방금 로그인했던 사람인지 알 방법이 없다.
HTTP는 기본적으로 Stateless(무상태)프로토콜이기때문이다.
즉, 이전 요청을 기억하지 않는다.
그래서 로그인 후 서버는 Cookie를 브라우저에 저장한다.
이후 브라우저가 서버에 요청을 보낼 때마다 Cookie가 함께 전송된다.

로그인
↓
서버
↓
Cookie 발급
↓
브라우저 저장
↓
다음 요청
↓
Cookie 자동 전송
↓
로그인 유지

덕분에 서버는 사용자를 식별할 수 있다.

옵션

옵션	설명	예시
Name	쿠키의 이름을 지정한다.	token=abc123에서 token
Value	쿠키에 저장되는 실제 데이터 값이다.	token=abc123에서 abc123
Max-Age	쿠키가 유지되는 시간을 초 단위로 설정한다. 시간이 지나면 자동 삭제된다.	Max-Age=3600 → 1시간 유지
Expires	쿠키가 삭제될 정확한 날짜와 시간을 지정한다.	Expires=Wed, 01 Jul 2026 12:00:00 GMT
Path	쿠키가 전송될 URL 경로를 지정한다.	Path=/ → 모든 경로에서 사용 가능
Domain	쿠키를 사용할 수 있는 도메인을 지정한다.	Domain=.example.com → api.example.com, www.example.com 사용 가능
Secure	HTTPS 환경에서만 쿠키를 전송한다.	Secure
HttpOnly	JavaScript에서 쿠키에 접근하지 못하도록 제한한다.	document.cookie 접근 불가
SameSite	다른 사이트 요청에서 쿠키 전송 여부를 제어한다.	Strict, Lax, None

 

---

Cookie 사용 예시

JavaScript에서도 생성할 수 있다.

document.cookie = "theme=dark";

유효 기간을 설정할 수도 있다.

document.cookie = "theme=dark; max-age=86400";

하지만 로그인과 같이 중요한 쿠키는 JavaScript에서 생성하지 않는 경우가 많다.
실무에서는 서버가 발급하는 경우가 대부분이다.

---

Local Storage와 Cookie의 가장 큰 차이

많은 사람들이 "로그인 토큰을 Local Storage에 저장하면 되는 것 아닌가?" 라고 생각한다.
하지만 실무에서는 보안 때문에 신중하게 선택한다.
Local Storage

• JavaScript에서 자유롭게 접근 가능
• XSS 공격에 노출될 가능성이 있음

Cookie

• HttpOnly 옵션을 사용하면 JavaScript에서 접근 불가능
• 로그인 인증 정보를 저장하기에 더 안전함

그래서 최근에는

• Access Token은 메모리(또는 상황에 따라 다른 저장 방식)
• Refresh Token은 HttpOnly Cookie

조합을 사용하는 서비스가 많다.
다만 인증 방식은 서비스의 보안 요구사항과 아키텍처에 따라 달라질 수 있으며, 모든 프로젝트에 동일하게 적용되는 것은 아니다.

---

Local Storage, Session Storage, Cookie 비교

항목	Local Storage	Session Storage	Cookie
저장 위치	브라우저	브라우저	브라우저
유지 기간	직접 삭제 전까지	탭 종료 전까지	만료 기간까지
새로고침	유지	유지	유지
브라우저 종료	유지	삭제	설정에 따라 유지
서버 자동 전송	X	X	O
JavaScript 접근	O	O	O (HttpOnly 제외)
주요 사용 용도	사용자 설정, 최근 기록	임시 데이터	로그인, 인증, 세션 관리

---

사용 시 주의사항

• Local Storage와 Session Storage에는 비밀번호, 주민등록번호, 카드 정보 등 민감한 정보를 저장하지 않는 것이 좋다.
• 로그인 인증 정보를 저장할 때는 보안을 고려하여 HttpOnly Cookie 사용 여부를 검토해야 한다.
• Cookie는 모든 HTTP 요청에 함께 전송되므로 꼭 필요한 정보만 저장하는 것이 좋다.
• Local Storage와 Session Storage는 문자열(String)만 저장할 수 있으므로 객체를 저장하려면 JSON.stringify()와 JSON.parse()를 사용해야 한다.

const user = {
  name: "Kim",
  age: 20,
};

localStorage.setItem("user", JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem("user"));

console.log(savedUser.name);
// Kim

---

핵심 요약

• Local Storage는 브라우저에 데이터를 반영구적으로 저장하며, 사용자 설정이나 최근 기록처럼 오래 유지해야 하는 정보에 적합하다.
• Session Storage는 현재 탭이 열려 있는 동안만 데이터를 유지하므로 회원가입, 결제 등 일시적인 정보를 저장할 때 사용한다.
• Cookie는 HTTP 요청과 함께 서버로 자동 전송되기 때문에 로그인 인증이나 세션 관리에 주로 사용된다.
• 로그인과 같은 중요한 인증 정보는 보안을 고려하여 HttpOnly Cookie를 사용하는 것이 일반적이다.
• 저장 기간과 서버 전송 여부를 기준으로 적절한 저장소를 선택하는 것이 중요하다.