#10. storage, cookie, cache

LocalStorage

저장위치 : 브라우저에 영구적으로 저장
용량 : 약 5 ~ 10MB
특징 :

• 페이지를 새로고침하거나 브라우저를 껐다켜도 데이터 유지
• 키-값 쌍으로 문자열만 저장 (객체 저장시 JSON.stringify())
• 다른 탭, 창에서도 동일한 도메인이면 데이터 공유가능(다른 브라우저면 X)

민감한 정보는 저장하면 안된다.

SessionStorage

저장위치 : 브라우저에 임시 저장 (탭을 닫으면 데이터 삭제)
용량 : 약 5MB
특징 :

• 탭 단위로 데이터 저장
• 페이지 새로고침 시에는 유지, 탭닫으면 사라짐

로그아웃하면 바로 세션이 종료되는 로그인에 사용
페이지 간 상태유지가 필요할때(페이지 이동시 폼 입력값유지)

Cookie

저장위치 : 브라우저와 서버에 모두 전달되는 작은 데이터들
용량 : 4KB제한
특징 :

• EXPIRES나 MAX-AGE설정으로 유효기간 지정 가능
• 서버와 매 요청마다 자동으로 전송 -> 인증에 자주 사용됨
• HttpOnly(javascript접근불가(XSS공격방어)), Secure(HTTPS연결에서만 쿠키 전송), SameSite(CSRF방지)같은 속성으로 보안강화가능

인증정보 저장시사용
사용자 설정 유지시 사용

Cache

저장위치 : 브라우저나 서버 임시 저장소
용량 : 브라우저 자동관리
특징 :

• 정적파일 캐싱 -> 페이지 로드 속도 개선
• 캐시 무효화 전략 필요할 때

자주 변경되지않는 정적 파일
API응답 데이터 캐싱