브라우저 저장소가 필요한 이유
- 영구 데이터: userId를 저장하여 리프레쉬후에도 로그인 유지
- 인증: 저장된 이메일, 비밀번호로 로그인
- 어플리케이션 속도 향상 : 이미지, 동영상, 큰 API 응답을 저장하여 재요청 방지
- 오프라인,낮은 네트워크에서의 접근성 : 서비스워커, 캐시 스토리지, IndexedDB를 사용
주의점
- 브라우저에 따라, 사이즈 제한이 있다.
- 민감한 정보는 낮은 보안과 조작 가능성 때문에 브라우저 저장소에 저장하지 않는다.
Local Storage
- string 값으로 Key-value 형식으로 저장
- 유효기간이 없다.(영구 데이터)
- 10MB 까지 저장 가능(브라우저별 상의)
- same-origin 정책, 도메인간 공유
- Host와 Port가 같아야 접근가능
localStorage.setItem(“key”, “value”)
localStorage.getItem(“key”)
localStorage.removeItem(“key”)Session Storage
- string 값으로 Key-value 형식으로 저장
- 윈도우가 닫히면 저장된 데이터는 사라진다.
- 10MB 까지 저장 가능(브라우저별 상의)
- same-origin 정책, 브라우저간 공유 안됨
- 서버에 보내지 않는다. 클라이언트에서만 사용
sessionStorage.setItem(“key”, “value”)
sessionStorage.getItem(“key”)
sessionStorage.removeItem(“key”)Cookie
- string 값으로 Key-value 형식으로 저장
- 유효기간이 있다. 유효기간 설정이 되지 않으면, 브라우저 세션이 끝나면 사라진다.
- 4KB 까지 저장 가능, 한 사이트 당 20개
- 모든 요청시 서버에 보내진다. same-origin 정책
- 서버는 세션 추적을 위해, 쿠키에서 데이터를 가져갈수 있다.
- 세션관리, 개인화, 트레킹
document.cookie=”name=John”IndexedDB
- 객체 또는 Key-value 형식으로 저장
- IE에서 250MB 까지 저장 가능
- 비동기, onsuccess, onerror, oncomplete 와 같은 event-driven
- same-origin 정책
- 유효기간이 없다.
- Local Storage 의 string으로 변환하는데에 걸리는 비용이 클경우
https://medium.com/@ajayverma_5579/browser-storage-part-1-cb8903fcec6
https://medium.com/@lancelyao/browser-storage-local-storage-session-storage-cookie-indexeddb-and-websql-be6721ebe32a
be_zion