브라우저 저장소의 종류

웹 브라우저에서 데이터를 클라이언트 측에 저장하기 위해 사용되는 저장소는 크게 세 가지 종류로 나뉜다.

쿠키 (Cookies)

  • 작은 텍스트 파일. 웹 서버가 클라이언트의 브라우저에 저장하는 데이터
  • 주로 세션 관리, 개인화 설정, 추적 등에 사용
  • 이름-값 쌍으로 구성
  • 유효 기간을 설정하여 영구적으로 저장하거나 세션 동안만 유지
  • 보안 및 용량 제한 등의 제약사항 존재
// 쿠키 생성 및 설정
document.cookie = 'username=John; expires=Thu, 18 Aug 2023 12:00:00 UTC; path=/'
 
// 쿠키 읽기
const cookies = document.cookie
console.log(cookies) // "username=John; otherCookie=value; ..."
 
// 쿠키 삭제 (만료일을 과거로 설정)
document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'

로컬 스토리지 (Local Storage)

  • HTML5에서 제공하는 영구적인 클라이언트 측 저장소
  • 브라우저에 데이터를 키-값 쌍으로 저장
  • 서버에 전송하지 않고 로컬에 저장
  • 도메인당 최대 5MB까지 저장 가능
  • localStorage 객체를 통해 접근
// 로컬 스토리지에 데이터 저장
localStorage.setItem('username', 'John')
 
// 로컬 스토리지에서 데이터 읽기
const username = localStorage.getItem('username')
console.log(username) // "John"
 
// 로컬 스토리지에서 데이터 삭제
localStorage.removeItem('username')

세션 스토리지 (Session Storage)

  • 로컬 스토리지와 유사하지만 데이터가 세션 동안만 유지
  • 브라우저 창이나 탭이 열려 있는 동안에만 데이터가 유지
  • 창이나 탭을 닫으면 데이터가 삭제
  • 도메인당 최대 5MB까지 저장 가능
  • sessionStorage 객체를 통해 접근
// 세션 스토리지에 데이터 저장
sessionStorage.setItem('token', 'mySecretToken')
 
// 세션 스토리지에서 데이터 읽기
const token = sessionStorage.getItem('token')
console.log(token) // "mySecretToken"
 
// 세션 스토리지에서 데이터 삭제
sessionStorage.removeItem('token')