web storage
web storage는 HTML5에서 추가된 저장소.
간단한 키와 값을 저장할 수 있다.
web storage를 상속받아 구현된 localStorage와 sessionStorage가 존재한다.
- 키와 값은 뭐가 들어와도 문자열로 변환되어 저장한다.
- 객체를 읽고 쓰려면 JSON.stringfy, JSON.parse를 해야한다. - 브라우저별 용량 제한이 다르다.
- origin(도메인)별 Storage는 다르며, origin별 용량제한이 있다.
- 프로토콜, 호스트, 포트가 같으면 같은 스토리지를 공유한다. - 이것마저 용량이 부족하다면 IndexedDB가 있다.
1. localStorage
- 로컬스토리지는 일부러 지우지 않는다면 브라우저를 닫고 열어도 계속 남아있다.
- 접근 : window.localStorage
- 사용예제: 지속적으로 필요한 데이터(자동로그인)
2. sessionStorage
- 세션스토리지는 페이지의 window가 바뀌거나 브라우저 탭을 닫을때 사라진다.
- 접근 : window.sessionStrage
- 사용예제 : 잠깐동안 필요한 정보(일회성 로그인 정보)
공통 메소드
- setItem(키,값) : 저장(이미있으면 update)
- getItem(키) : 조회
- removeItem(키) : 삭제
- clear():전체삭제
- key(n) : n번째 키의 이름 반환 (0부터시작)
공통 사용 예제
- 글 작성 중간 중간에 읽어버리지 않기 위한 임시 저장 용도
- 장바구니나 좋아하는 콘텐츠 등 수시로 변경되는 경우
- history를 저장하였다가 이동할 경우
- 그 외 서버에 반드시 저장할 필요가 없는 경우
Cookie
- 쿠키는 Web Storage가 나오기 이전에 브라우저에서 저장소 역할을 해왔다.
- 쿠키는 만료기한이 있는 key-value Storage이다.
- 쿠키는 하나의 도메인 페이지에서 최대 20개, 4kb 용량 제한이 있다.
- 매 요청마다 서버로 쿠기가 같이 전송된다. (쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문)
- 서버로 전송안해도 되는 불필요한 데이터를 localStorage, sessionStorage에 저장하면 된다. - 접근 : document.cookie
각각의 차이점
cookie vs Web Storage
- 쿠키 데이터는 서버로 전송되지만, Web Storage의 데이터는 전송되지 않는다.
- 쿠키 데이터와 달리 Web Storage의 데이터는 반영구저장이 가능하다.
로컬스토리지 vs 세션스토리지
- 데이터유지
- 로컬스토리지는 clear,remove 하지 않는다면 영구저장하며
- 세션스토리지는 해당 페이지의 window객체가 사라질때 사라진다.
참고 출처
프론트엔드 주니어 개발자 🚀