[web] LocalStorage, SessionStorage, Cookies

Jenny·2023년 3월 24일
0

CS

목록 보기
1/5
post-thumbnail

솔직히 쿠키 있으면 이런 사진 하나쯤은 쓸 수 있잖아요


Web Storage

  • key , value를 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회하는 패턴
  • 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성 구분 가능, 환경에 맞는 선택이 가능함
  • 기존 웹 환경의 쿠키(Cookie)의 단점을 극복하는 개선점이 도입됨

Cookie의 비교한 Web Storage

  • 서버로 전송 이루어지지 않음
    * 쿠키는 매번 서버로 전송됨 웹 사이트에서 쿠키를 설정하면 > 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송됨
    • Web Storage는 저장된 데이터가 클라이언트에 존재하지만 서버로 전송은 이루어지지 않음 > 네트워크 트래픽 비용을 줄여줌
  • 문자열을 넘어(스크립트) 객체정보를 저장함
  • 용량 제한이 없음
    * 쿠키 : 개수, 용량 제한 있음 ( 하나의 사이트에 저장할 수 있는 최대 쿠키 수 : 20개 , 크기 : 4KB)
  • 영구 데이터 저장 가능
    * 쿠키 : 만료일자 지정하게 되어있어 언젠간 제거됨

localStorage

사용자가 브라우저 창을 닫았을 때 데이터 삭제 X, 만료 날짜 없이 사용자 정보 데이터를 저장함

  • Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어짐
  • 저장한 데이터를 명시적으로 지우지 않는 이상 영구적 보관이 가능함
  • 도메인마다 다른 로컬 스토리지가 생성됨
  • 브라우저를 종료해도 데이터가 보관되어 다음 접속에도 데이터 사용이 가능함
  • 탭 여러개 열어도 공유됨

SessionStorage

브라우저 창을 닫으면 데이터 삭제됨

  • windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어짐
  • 데이터의 지속성과 액세스 범위에 제한이 존재함
  • 브라우저가 종료되면SessionStorage도 삭제됨
  • 같은 사이트, 같은 도메인이어도 브라우저가 다르면 서로 다른 영역임 (브라우저 컨텍스트가 다르기 때문)
    * 탭 브라우징, 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 서로 침범 못함 ! <-> 도메인만 같으면 전역적으로 공유 가능한 LocalStorage와 구분되는 특징
  • WebStorage의 보안은 서로 다른 도메인의 데이터 침범은 막고 있지만 사용자를 막고 있지 않음
  • 사용자는 얼마든지 저장된 값을 임의로 수정이 가능함

참고
https://ko.javascript.info/localstorage

profile
Developer로의 여정

0개의 댓글