브라우저가 기억하는 3가지 방식 : 쿠키, 로컬스토리지, 세션스토리지

브라우저가 기억하는 3가지 방식 : 쿠키, 로컬스토리지, 세션스토리지

웹사이트를 자주 사용하다 보면 "자동 로그인", "장바구니 유지", "화면 테마 유지" 같은 기능들을 경험하게 됩니다.
이런 기능들이 가능한 이유는 바로 브라우저 저장소 덕분입니다.
이 글에서는 쿠키(Cookie), 로컬스토리지(LocalStorage), 세션스토리지(SessionStorage)라는 세 가지 브라우저 저장소의 개념과 차이점을 살펴보겠습니다.

 

728x90

1. 브라우저 저장소란 무엇인가요?

우리가 인터넷에서 웹사이트를 사용할 때, 웹사이트는 때때로 우리의 정보를 "기억"해야 할 필요가 있습니다.
💡예를 들어 이런 경우를 생각해 보겠습니다:

🔸로그인했더니 다음 날 다시 들어가도 자동으로 로그인이 되어 있음

🔸화면 색상을 어두운 테마(다크모드)로 바꿨는데, 다음에도 그대로 유지됨

🔸쇼핑몰에서 상품을 장바구니에 담았는데, 페이지를 나갔다가 돌아와도 그대로 남아 있음

 

이런 기능이 가능한 이유는 바로 브라우저가 정보를 잠깐 저장해 두기 때문입니다.
이처럼 웹사이트가 사용자의 정보를 브라우저에 잠시 보관하거나, 오래 저장하는 공간을 우리는 브라우저 저장소라고 부릅니다.

 

💡웹사이트에서 주로 사용하는 저장소는 다음 세 가지입니다:

🔸쿠키 (Cookie)
🔸로컬스토리지 (LocalStorage)
🔸세션스토리지 (SessionStorage)

이 각각의 저장소는 마치 다른 성격의 보관함 같아서, 사용 목적에 따라 잘 골라서 써야 합니다.

상황	추천 저장소	이유
로그인 상태 유지	🍪 쿠키	서버와 연결된 인증 정보가 필요함
다크모드 설정 저장	🗃️ 로컬스토리지	브라우저가 꺼져도 데이터가 남아야 함
탭에서만 임시 저장	📄 세션스토리지	탭을 닫으면 자동 삭제되도록 하기 위해

 

💡왜 중요한가요?

브라우저 저장소를 잘 이해하면 웹사이트를 사용할 때 더 똑똑하게 정보를 관리할 수 있고,
개발자라면 언제, 어떤 저장소를 써야 할지 결정하는 데 큰 도움이 됩니다.

예를 들어, 로그인 정보를 저장하는데 세션스토리지를 쓰면 브라우저 탭을 닫는 순간 로그아웃되어 사용자에게 불편함을 줄 수 있습니다.
반대로 임시로 입력한 내용을 로컬스토리지에 영구 저장해 두면, 개인정보가 불필요하게 오래 남을 수도 있습니다.

 

2. 쿠키 (Cookie) – 서버와 정보를 주고받을 때 사용

쿠키는 웹사이트가 사용자의 웹 브라우저에 저장하는 작은 텍스트 파일입니다. 서버와 정보를 주고받을 때 주로 사용됩니다.

💡쿠키란?

웹 서버가 사용자에게 정보를 보내면, 브라우저가 이 정보를 쿠키 형태로 저장합니다. 나중에 동일한 서버에 다시 요청을 보낼 때, 저장된 쿠키를 자동으로 서버로 함께 전송하여 서버가 사용자를 식별하거나 특정 정보를 기억하도록 돕습니다.

 

💡특징

🔸만료일 설정 가능: 쿠키는 만료일을 정할 수 있어요. 만료일을 설정하지 않으면 웹 브라우저를 닫을 때 자동으로 삭제됩니다.

🔸작은 용량: 데이터 용량이 4KB(킬로바이트) 이하로 매우 작습니다.

🔸자동 전송: 웹사이트에 접속할 때마다 자동으로 서버에 전송되기 때문에, 서버와 연동이 필요한 로그인 세션 유지나 광고 추적과 같은 데이터에 적합합니다.

 

💡예시

🔸자동 로그인 유지: 한 번 로그인하면 다음에 다시 접속할 때 자동으로 로그인되도록 할 수 있습니다.

🔸광고 추적: 사용자의 관심사에 맞는 광고를 표시하기 위해 방문 기록을 추적합니다.

🔸방문자 구분: 특정 사용자가 웹사이트에 처음 방문하는지, 재방문하는지 등을 구분할 때 사용됩니다.

 

💡코드 작성 예(JavaScript)

// 쿠키 저장 (만료일 설정)
document.cookie = "username=JohnDoe; path=/; expires=Fri, 31 Dec 2025 23:59:59 GMT";

// 쿠키 읽기 함수
function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

console.log(getCookie("username")); // 결과: JohnDoe

// 쿠키 삭제
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

 

3. 로컬스토리지 (LocalStorage) – 오래 저장하고 싶을 때

로컬 스토리지는 브라우저가 사용자의 데이터를 클라이언트에 영구적으로 저장하는 공간입니다. 브라우저를 닫아도 데이터가 계속 유지된다는 점이 가장 큰 특징입니다.

 

💡로컬스토리지란?

사용자의 브라우저에 데이터를 저장하며, 한 번 저장된 데이터는 사용자가 직접 삭제하거나 브라우저 캐시를 지우기 전까지는 계속 남아있습니다.

 

💡특징

🔸큰 저장 용량: 5MB(메가바이트) 이상의 비교적 큰 데이터를 저장할 수 있습니다.

🔸영구 저장: 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 삭제되지 않고 유지됩니다.

🔸서버 미전송: 쿠키와 달리 서버로 전송되지 않고 오직 브라우저 안에서만 사용됩니다.

🔸문자열만 저장: 데이터를 저장할 때는 문자열 형태로만 저장할 수 있어요. 객체(Object)를 저장하려면 JSON.stringify()를 사용하여 문자열로 변환해야 합니다.

 

💡예시

🔸다크 모드/언어 설정: 사용자가 설정한 웹사이트의 테마(다크 모드 등)나 언어 설정을 저장하여 다음에 접속할 때도 동일한 설정이 유지되도록 합니다.

🔸비회원 장바구니: 로그인하지 않은 사용자의 장바구니에 담긴 상품 정보를 저장할 때 사용됩니다.

🔸오프라인 사용 데이터: 인터넷 연결 없이도 사용할 수 있는 데이터(예: 간단한 메모 앱의 내용)를 저장할 수 있습니다.

 

💡코드 작성 예(JavaScript)

// 데이터 저장
localStorage.setItem("theme", "dark");

// 데이터 가져오기
const theme = localStorage.getItem("theme");
console.log(theme);  // 결과: dark

// 데이터 삭제
localStorage.removeItem("theme");

// 모든 데이터 초기화
localStorage.clear();

//객체 저장 방법 예시
const user = { name: "Jane", age: 30 };
localStorage.setItem("userInfo", JSON.stringify(user));

const loadedUser = JSON.parse(localStorage.getItem("userInfo"));
console.log(loadedUser.name);  // 결과: Jane

 

4. 세션스토리지 (SessionStorage) – 탭을 닫으면 삭제됨

세션 스토리지는 탭 또는 창 단위로만 유지되는 임시 저장소입니다. 브라우저 탭이나 창을 닫으면 데이터가 자동으로 사라져요.

💡세션스토리지란?

사용자가 특정 브라우저 탭을 열어둔 동안에만 유효한 데이터를 저장합니다. 해당 탭을 닫으면 저장된 모든 데이터는 사라집니다.

 

💡특징

🔸탭 단위 관리: 각 탭은 독립적인 세션 스토리지를 가집니다. 같은 웹사이트라도 새 탭에서 열면 기존 탭의 세션 스토리지와는 별개의 공간이 됩니다.
🔸새로고침 유지: 탭 내에서 페이지를 새로고침하더라도 데이터는 유지됩니다.
🔸임시 저장: 창을 닫으면 데이터가 자동으로 삭제되므로, 임시 데이터 저장에 적합합니다.
🔸서버 미전송: 로컬 스토리지와 마찬가지로 서버로 전송되지 않고 브라우저 안에서만 사용됩니다.

 

💡예시

🔸입력 중인 폼 데이터 임시 저장: 사용자가 폼을 작성하다가 실수로 페이지를 이동해도, 다시 돌아왔을 때 입력 중이던 내용이 유지되도록 할 수 있습니다.

🔸검색 필터 상태 유지: 검색 결과 페이지에서 필터를 적용했을 때, 페이지를 새 로고침해도 필터 상태가 유지되도록 합니다.

🔸비회원 주문서 작성 데이터: 로그인하지 않은 사용자가 주문서를 작성하는 도중에 잠시 다른 페이지를 방문하더라도, 돌아왔을 때 작성 중이던 정보가 남아있도록 할 수 있습니다.

 

💡코드작성예(JavaScript)

// 데이터 저장
sessionStorage.setItem("tempEmail", "user@example.com");

// 데이터 가져오기
const email = sessionStorage.getItem("tempEmail");
console.log(email); // 결과: user@example.com

// 데이터 삭제
sessionStorage.removeItem("tempEmail");

// 전체 삭제
sessionStorage.clear();

 

5. 비교 정리표 - 한눈에 보기

항목	Cookie	LocalStorage	SessionStorage
유지 기간	설정 가능 (또는 브라우저 종료 시)	브라우저에 계속 저장됨	탭/창을 닫으면 삭제됨
서버 전송	✅ 자동 전송됨	❌ 전송되지 않음	❌ 전송되지 않음
저장 위치	브라우저 + 서버	브라우저	브라우저
용량 제한	약 4KB	수 MB	수 MB
사용 목적	로그인, 인증, 광고 추적	사용자 설정, 캐시	입력폼 임시 저장, 임시 상태 유지

위 표는 쿠키, 로컬스토리지, 세션스토리지의 저장 위치, 유지 기간, 서버 전송 여부, 용량 한도, 주요 사용 목적 등을 한눈에 비교한 것입니다.
각 저장소는 용도에 따라 장단점이 뚜렷하므로, 상황에 맞는 선택이 중요합니다.
특히 데이터의 지속 시간과 보안 필요성에 따라 저장소를 구분하면 효율적인 웹 개발이 가능합니다.

 

이 그림은 브라우저 저장소 3종(세션스토리지, 쿠키, 로컬스토리지)의 데이터 유지 기간(수명)과 서버와의 통신 방식을 비교한 것입니다.

 

💡테이터 수명 측면에서는:

🔸세션스토리지는 브라우저 탭이나 창을 닫으면 곧바로 데이터가 삭제됩니다.
🔸쿠키는 만료일을 설정할 수 있어 일정 기간 유지가 가능하며, 설정하지 않으면 세션 쿠키처럼 동작합니다.
🔸로컬스토리지는 사용자가 직접 삭제하지 않는 한 데이터가 브라우저에 계속 남아 있습니다.

 

💡서버 통신 방식에서는:

🔸쿠키는 모든 HTTP 요청에 자동으로 포함되어 서버로 전송되므로 서버 부하가 발생할 수 있습니다.
🔸반면, 로컬스토리지와 세션스토리지는 브라우저 내부에서만 작동하며, 서버로는 자동 전송되지 않습니다. 필요한 경우 JavaScript로 수동 전송해야 합니다.

 

이처럼 저장소 선택은 데이터의 수명과 서버 전송 여부를 기준으로 판단하는 것이 핵심입니다.

 

6. 브라우저 저장소, 보안은 어떻게 해야 할까?

웹사이트에서 사용자 정보를 저장하는 건 매우 유용하지만, 잘못 저장하면 해킹 위험이 생길 수 있습니다.
따라서 쿠키, 로컬스토리지, 세션스토리지를 사용할 때 꼭 알아야 할 보안 주의사항을 살펴보겠습니다.

 

1. 쿠키는 서버로 전송되기 때문에 보안 설정이 꼭 필요합니다.

쿠키는 웹사이트에 접속할 때마다 자동으로 서버에 전송되기 때문에, 중간에서 탈취될 위험이 있습니다.
특히 로그인 정보나 인증 토큰 같은 민감한 정보를 저장할 때는 반드시 아래 두 가지 속성을 설정해야 합니다.

💡Secure 속성

🔸이 속성을 설정하면 HTTPS(보안 연결) 환경에서만 쿠키가 전송됩니다.

🔸즉, 암호화된 안전한 연결에서만 쿠키가 사용되기 때문에 가로채기가 어렵습니다.

💡HttpOnly 속성

🔸이 속성을 설정하면 자바스크립트 코드로 쿠키에 접근할 수 없습니다.

🔸즉, XSS(크로스 사이트 스크립팅) 공격을 막을 수 있습니다.

Set-Cookie: token=abc123; Secure; HttpOnly; SameSite=Strict;

위 설정은 서버에서 쿠키를 보낼 때 적용하는 방식입니다.

 

2. 로컬스토리지와 세션스토리지는 자바스크립트로 바로 접근 가능

로컬스토리지와 세션스토리지는 브라우저에만 저장되고 서버로는 전송되지 않지만, 단점이 하나 있습니다:
누구든지 브라우저 콘솔(개발자 도구)에서 값을 바로 꺼내볼 수 있습니다.

즉, 누군가 악성 스크립트를 심거나 XSS 공격에 성공한다면,
*브라우저에 저장된 모든 정보(예: 로그인 토큰, 사용자 이름 등)*를 그대로 빼낼 수 있습니다.

 

절대 해서는 안 되는 예시:

localStorage.setItem("password", "mySecretPassword123"); // ❌ 위험

➡ 민감한 정보(비밀번호, 토큰 등)는 로컬스토리지나 세션스토리지에 저장하지 마세요!

 

3. 저장소는 누구나 볼 수 있어요 (개발자 도구에서)

웹 브라우저에는 *개발자 도구(F12)*가 있어서, 쿠키·로컬스토리지·세션스토리지에 저장된 내용은 누구나 쉽게 확인할 수 있습니다.
예를 들어:

📌 크롬 브라우저 → F12 → "Application" 탭 → Storage 항목 클릭 → 저장된 모든 데이터가 보입니다.

그래서 암호화되지 않은 민감한 정보를 저장소에 그대로 담아두면 위험해요.

 

4. 보안 팁 요약

항목	보안 팁
쿠키	Secure, HttpOnly, SameSite 속성을 꼭 설정해야 합니다.
로컬/세션스토리지	비밀번호나 토큰 같은 민감한 정보 저장은 절대 금지입니다.
공통	중요한 데이터는 가능하면 서버에 저장하고, 브라우저에는 최소한만 남기세요.
추가 보안 팁	✅ XSS 방지 코딩 (입력값 필터링) 필수✅ HTTPS 적용은 기본 중의 기본

 

---

"본 글은 과거 cericube-it(티스토리)에서 발행했던 콘텐츠를 기반으로, 새롭게 정리한 업데이트 버전입니다."