2025-09-01

1일 1아티클

요즘IT

브라우저 저장소

소개

• 클라이언트 측 데이터 저장
• localStorage, sessionStorage, cookie, etc.

localStorage

• 도메인 단위로 데이터를 영구 저장
• 테마, 언어 설정, 비로그인 상태의 장바구니 등 장기적으로 유지가 필요한 데이터의 저장 용도
• JSON.stringify, JSON.parse를 통해 직렬화/역직렬화
• 브라우저마다 약 5MB의 용량 제한
• 서버 자동 연동 X, XSS 공격에 취약

sessionStorage

• 브라우저 탭 단위로 데이터를 저장
• 탭을 닫는 즉시 데이터 소멸 → 임시 데이터, 인터페이스 상태 저장 용도
• 브라우저마다 약 5MB의 용량 제한
• 서버 자동 연동 X

cookie

• 클라이언트와 서버 간의 요청에 자동 포함되는 방식
• HTTP 요청 시마다 서버로 자동 전송 → 인증 정보 및 세션 식별자 저장 용도
• 도메인, 경로에 따라 전송 범위 조절 가능 ex. path=/admin : /admin 하위 경로만 접근 가능
• HTTPS, HTTPOnly 설정 등 가능 → 보안 강화
• 약 4KB의 용량 제한

실무 선택 기준

• 인증 토큰 저장 시 localStorage? cookie?
  • localStorage : XSS 공격에 매우 취약, 사용자 인증 정보 노출 우려
  • cookie : 모든 요청에 자동 포함되므로 CSRF 공격에 취약, 옵션을 통해 방지 필요
  • 실무에서는 Refresh Token을 HttpOnly 쿠키에 저장, Access Token은 메모리/sessionStorage 보관

저장소 선택 시 단순 기능만 보고 판단 X, 동작 방식/보안/생명주기/전송 여부 고려 필요

주의점

• JSON 저장/파싱
  • localStorage와 sessionStorage는 문자열만 저장 가능하므로, JSON 직렬화/역직렬화 필수
• 스토리지 초과 시 예외 처리
  • localStorage와 sessionStorage는 저장 용량 초과 시 Quota Exceeded Error 발생
  • 사용자가 너무 많은 데이터 저장/의도치 않은 루프로 인한 반복된 저장 시 발생
  • 예외 처리를 통한 사용자 경고/대체 동작 유도
• TTL 직접 구현 시
  • localStorage와 sessionStorage는 데이터의 자동 만료 시간 미적용
  • 만료 처리를 위해 타임스탬프를 함께 저장 필요
  • 데이터 사용시 유효성 검사 필요
• 스토리지 동기화 이벤트 처리
  • localStorage는 탭 간 동기화 지원
  • 다른 탭에서 저장소 변경 시 storage 이벤트 발생 → 실시간 동기화 가능
  • sessionStorage와 cookie는 동기화 미지원
  • 필요하다면 BroadcastChannel API 등 별도 통신 수단 고려

오늘 배운 것

1. 알고리즘
   • swea 2819 격자판의 숫자 이어 붙이기
   • DFS, 완전탐색

내일 할 일

1. 자기소개서 작성

참고자료

• 브라우저 저장소 완전 정복: 로컬, 세션, 쿠키 사용 전략