솔직히 쿠키 있으면 이런 사진 하나쯤은 쓸 수 있잖아요
Web Storage
- key , value를 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴
- 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성 구분 가능, 환경에 맞는 선택이 가능함
- 기존 웹 환경의 쿠키(Cookie)의 단점을 극복하는 개선점이 도입됨
Cookie의 비교한 Web Storage
- 서버로 전송 이루어지지 않음
* 쿠키는 매번 서버로 전송됨 웹 사이트에서 쿠키를 설정하면 > 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송됨- Web Storage는 저장된 데이터가 클라이언트에 존재하지만 서버로 전송은 이루어지지 않음 > 네트워크 트래픽 비용을 줄여줌
- 문자열을 넘어(스크립트) 객체정보를 저장함
- 용량 제한이 없음
* 쿠키 : 개수, 용량 제한 있음 ( 하나의 사이트에 저장할 수 있는 최대 쿠키 수 : 20개 , 크기 : 4KB) - 영구 데이터 저장 가능
* 쿠키 : 만료일자 지정하게 되어있어 언젠간 제거됨
localStorage
사용자가 브라우저 창을 닫았을 때 데이터 삭제 X, 만료 날짜 없이 사용자 정보 데이터를 저장함
- Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어짐
- 저장한 데이터를 명시적으로 지우지 않는 이상 영구적 보관이 가능함
- 도메인마다 다른 로컬 스토리지가 생성됨
- 브라우저를 종료해도 데이터가 보관되어 다음 접속에도 데이터 사용이 가능함
- 탭 여러개 열어도 공유됨
SessionStorage
브라우저 창을 닫으면 데이터 삭제됨
- windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어짐
- 데이터의 지속성과 액세스 범위에 제한이 존재함
- 브라우저가 종료되면SessionStorage도 삭제됨
- 같은 사이트, 같은 도메인이어도 브라우저가 다르면 서로 다른 영역임 (브라우저 컨텍스트가 다르기 때문)
* 탭 브라우징, 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 서로 침범 못함 ! <-> 도메인만 같으면 전역적으로 공유 가능한 LocalStorage와 구분되는 특징- WebStorage의 보안은 서로 다른 도메인의 데이터 침범은 막고 있지만 사용자를 막고 있지 않음
- 사용자는 얼마든지 저장된 값을 임의로 수정이 가능함
Developer로의 여정