문서 목록
⭐️는 필수 지식, 💡는 이해하면 좋은 지식이에요.

웹 저장소

개념 설명

브라우저에서 데이터를 저장하는 다양한 방법(쿠키, 세션, 로컬스토리지)과 각각의 특징.

핵심 포인트

  • 쿠키: 서버로 자동 전송, 4KB 제한, 만료일 설정 가능
  • 세션 스토리지: 탭 단위 임시 저장, 5-10MB, 탭 닫으면 삭제
  • 로컬 스토리지: 도메인 단위 영구 저장, 5-10MB, 수동 삭제 전까지 유지
  • IndexedDB: 대용량 객체 데이터베이스, 노셀캘 API
  • 보안: httpOnly, secure, SameSite 속성으로 쿠키 보안 강화

예시 코드

// 쿠키 조작
class CookieManager {
  static set(name, value, days = 7) {
    const expires = new Date();
    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
    
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/; secure; samesite=strict`;
  }
  
  static get(name) {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
      const [key, value] = cookie.trim().split('=');
      if (key === name) {
        return decodeURIComponent(value);
      }
    }
    return null;
  }
  
  static delete(name) {
    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  }
}

더 많은 내용을 확인하세요! 📚

웹 저장소의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기