브라우저 저장소 ( WebStorage, cookie )

안녕하세요, YB 박소이입니다!

2주차 세미나 때 localStorage를 활용한 실습을 진행하고 브라우저 저장소를 비교해보면 좋을 것 같아 이번 아티클 주제로 선정하였습니다. localStorage, sessionStorage, cookie에 대해 알아보겠습니다!

---

 

🔎 브라우저 저장소란?

브라우저 저장소는 웹 애플리케이션에서 데이터를 저장하기 위한 방법으로,

로그인 정보를 유지하거나, 페이지 상태를 기억하는 등 다양한 상황에서 브라우저 저장소를 활용하게 됩니다.

 

🗂️ Web storage와 Cookie

브라우저 저장소는 크게 Web storage와 Cookie로 나뉜다고 볼 수 있습니다.

둘다 클라이언트 측에서 데이터를 저장하는 방법인데, 각각 특징을 알아보겠습니다.

 

🍪 Cookie

쿠키는 사용자가 웹 사이트를 방문할 때 브라우저에 저장되는 작은 데이터 조각입니다.

사용자가 웹 사이트를 방문할 때 생성되고, 브라우저에 저장됩니다. 이후 사용자가 같은 웹 사이트를 다시 방문할 때, 해당 웹 사이트는 브라우저를 통해 쿠키에 저장된 정보를 읽어올 수 있습니다.

 

 

쿠키의 주요 특징은 다음과 같습니다.

• 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어진다.
  • 쿠키를 설정하면 도메인, 경로 조건이 만족할 경우 브라우저가 자동으로 HTTP 요청에 쿠키를 포함시켜 서버로 전송
  ⇒ 네트워크 부하가 생길 수 있다는 단점이 있다.
• 만료일이 지나거나 브라우저가 닫히면 삭제될 수 있다.
  • 만료일자 설정X : 세션 쿠키로 간주 ( 메모리에 저장되어 브라우저나 탭이 닫히면 삭제 )
  • 만료일자 설정O : 지속적 쿠키로 간주 ( 디스크에 저장되어 만료일 전까지 영구 저장 )

• 한개의 쿠키당 약 4KB의 용량 제한
• 일시적으로 필요한, 중요성이 낮은 데이터를 저장하는데 활용
  • 하루동안 보지 않기와 같은 팝업
  • 장바구니 정보
  • 사용자 로그인 정보

 

쿠키를 저장, 확인, 삭제는 아래 코드를 통해 진행할 수 있습니다.

document.cookie = "username=sweb"; // 저장
console.log(document.cookie); // 확인
document.cookie = "username="; // 삭제

 

또한, 몇 가지 옵션을 설정할 수 있는데, 여러 옵션을 사용할 경우 세미 콜론(;)을 통해 구분할 수 있습니다.

 

1. path

: 기본 값은 현재 경로이며, 쿠키 설정 시 path에 저장한 경로의 하위 경로에서만 접근할 수 있습니다.

• ex) /path1 설정 → /path1, /path1/path2 등
• 현재 도메인의 모든 경로에서 사용해야 하는 쿠키이면, path=/로 설정해줘야 페이지를 이동해도 설정한 쿠키를 확인할 수 있습니다!

document.cookie = "key=value; path=/";

결과

 

2. expires, max-age

• expires (유효 일자)
  • 해당 일자에 도달하면 쿠키를 자동으로 삭제합니다.
  • 반드시 GMT 포맷으로 설정해야 합니다.

expires=Tue, 19 Jan 2038 03:14:07 GMT

 

• max-age (만료 기간)
  • 현재부터 설정하고자하는 만료일시까지의 시간으로 초로 설정합니다.
  • 0이나 음수값을 설정하면 쿠키는 바로 삭제됩니다.

max-age=3600

 

이외의 옵션이 더 궁금하시다면 해당 자료를 참고해보시면 좋을 것 같습니다.

https://ko.javascript.info/cookie

 

 

💾 Web Storage

 

웹 스토리지는 HTML5에서 새롭게 도입된 클라이언트 저장 방식으로, 다음과 같은 특징이 있습니다.

• 브라우저 내에서만 동작한다.
  • 브라우저의 JS 코드에서 직접 접근할 수 있다.
• 쿠키와 다르게 서버로 자동 전송되지 않는다.
  • 저장소에 있는 값들은 HTTP 요청에서 자동으로 추가가 되지 않기 때문에 쿠키보다 더 많은 데이터를 보관할 수 있고, 낭비되는 네트워크 트래픽을 줄일 수 있다!

• 키-값 쌍으로 데이터를 저장한다.
• 만료일자를 따로 정하지 않는다.
• 약 5MB 이상의 데이터를 저장할 수 있다.
• 동일 출처 정책: 같은 도메인에서만 데이터에 접근하고 수정할 수 있다.

 

웹 스토리지는 데이터 지속성에 따라 다시 localStorage와 sessionStorage로 나뉩니다.

1. local Storage 로컬 스토리지

브라우저에 데이터를 영구 저장하는 공간으로, 브라우저를 종료해도 데이터를 영구적으로 보관합니다.

도메인만 같다면, 모든 브라우저 간에 전역적으로 데이터가 공유되는 특성이 있습니다.

 

유지되어야 할 데이터와 지속적으로 필요한 정보를 저장하는데 활용됩니다.

• 자동 로그인 정보, 테마 설정, 사용자 프로필 정보

localStorage.setItem("key", value); 	// 데이터 쓰기
localStorage.getItem("key"); 		// 데이터 읽기
localStorage.removeItem("key"); 	// 키의 데이터 삭제
localStorage.clear(); 			// 전체 삭제
localStorage.length; 			// 저장된 키-값 쌍의 개수

 

 

2. Session Storage 세션 스토리지

브라우저 세션이 유지되는 동안만 존재하기 때문에 브라우저가 종료되면 데이터가 삭제되는 비영구성의 특징이 있습니다.

도메인이 같더라도 브라우저가 다르면 세션도 달라지므로 데이터가 공유되지 않습니다.

 

일시적으로 필요한 정보나 보안 상 중요한 데이터를 저장할 때도 활용할 수 있습니다.

• 일회성 로그인, 사용자가 작성한 글

 

🔎 여기서 세션이란?

사용자가 웹 브라우저를 열고 해당 브라우저를 종료할 때까지의 기간을 말합니다.

 

사용 방법은 로컬 스토리지와 비슷합니다.

sessionStorage.setItem("key", value); 	// 데이터 쓰기
sessionStorage.getItem("key"); 		// 데이터 읽기
sessionStorage.removeItem("key"); 	// 키의 데이터 삭제
sessionStorage.clear(); 		// 전체 삭제
sessionStorage.length; 			// 저장된 키-값 쌍의 개수

 

 

🌐 정리하면..

항목 쿠키 (Cookie) 로컬 스토리지 (localStorage) 세션 스토리지 (sessionStorage)

항목	쿠키 (Cookie)	로컬 스토리지 (localStorage)	세션 스토리지 (sessionStorage)
저장 위치	브라우저 내부 (작은 텍스트 파일)	브라우저 내부 (도메인 단위 저장)	브라우저 내부 (탭 단위)
데이터 용량	약 4KB	약 5MB	약 5MB
자동 전송 여부	매 HTTP 요청 시 서버로 자동 전송됨	서버로 자동 전송 X	서버로 자동 전송 X
수명	설정한 만료일까지 유지 (설정 X → 세션 쿠키)	브라우저에 영구 저장됨 (삭제 시까지 유지)	탭이 살아있는 동안 유지 (탭 종료 시 삭제)
브라우저 접근	document.cookie 사용	localStorage 객체 사용	sessionStorage 객체 사용
사용 예시	로그인 인증 유지, 트래킹, 서버와의 상태 유지 등	사용자 설정 저장(테마, 언어 설정), 자동 로그인 등	일시적 데이터 저장, 일회성 로그인 등

 

---

 

쿠키와 스토리지는 웹 개발에서 자주 활용되고, 실제 면접 질문으로도 자주 등장하는 주제라고 합니다.

이번 아티클을 통해 개념을 정리하고 활용하는 데 도움이 되었으면 하는 바람으로… 읽어주셔서 감사합니다! ☺️

 

 

 

참고 자료

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage

https://ko.javascript.info/cookie

https://chihoya.tistory.com/15