웹 저장소 및 HTTPS, CORS 보안(3) - Storage

이 Storage는 Cookie, Session처럼 Stateful HTTP를 위한 기술은 아니다.

✅ Storage와 Cookie의 목적 차이

🔹Storage

웹 브라우저 저장소 (Stateful Http를 위한 기술은 아니다.)

유저에 의해 변경된 옵션 상태 등 -> 필요에 따른 조회가 필요할 때(진짜 저장소)

• 마지막에 어떤 소셜 계정으로 로그인했는지 저장하고, 1년 뒤 로그인할 때 표시하여 알려주기

🔹Cookie

웹 서버에게 웹 브라우저가 매번 전달할 특정 정보를 위한 저장소(Stateful)

로그인 인증 정보 등 -> 웹 서버가 매번 요청할 때마다 필요한 정보를 웹 브라우저에 넣어두고 전달받아 쓴다.

• 만료시간이 필요한 정보는 cookie를 사용

 

[Storage와 Cookie구분하기]

• 사용자가 방문한 페이지 저장: local storage
• 검색 기록: local storage
• 장바구니: local storage, cookie
• 로그인 정보 저장 / 로그인 상태 유지: cookie -> 서버한테 전달해서 인증이 필요함.
• 유저에 의해 변경된 옵션의 상태: local storage

정리) 웹 브라우저 내 저장소 storage와 Cookie 목적

웹 브라우저에 저장된다는 점에선 storage와 cookie는 동일

• Cookie: 웹 서버에게 반복적으로 전달하기 위한 + 작은 정보 + 만료시간을 갖고
• Storage: 웹 브라우저에서만 사용가능한 + 큰 정보 + 만료시간 없이

	Cookie	Storage
저장 가능 용량	4KB	10MB
만료	만료 시간 설정 가능	만료 시간 설정 불가능
범위	지정된 Domain + Path 대해서만 유효	지정된 Domain내에 모두 유효
보안	웹 서버에게 Non-HTTPS 요청 시 노출 -> 스크립트 접근 여부 제어 가능	웹 브라우저에서만 접근 가능 -> 스크립트 접근 가능 `localStorage.getItem({key})`
브라우저 간 공유	불가	불가

✅ Storage 의 종류: Storage 유효시간에 따라

• Local Stoarge: 웹 브라우저 창이 닫혀도 영구적으로 저장 - 길게 저장되는 내용 저장, 용량 처리 조심
  • 최근에 로그인 했던 수단을 표기하기 위해 마지막 로그인 수단 정보 저장 등등..
• Session Storage: 웹 브라우저 창이 닫히면 삭제 - 단발적인 내용 저장