쿠키, 로컬 스토리지, 세션 스토리지

loopydoopy·2023년 4월 22일
0

브라우저 내에 데이터를 저장하려면?

  1. 웹 스토리지

  2. 쿠키

    위의 두 가지 방식 중 사용할 수 있다.


웹 스토리지 vs 쿠키

  • 쿠키와 다르게 웹 스토리지는 네트워크 요청 시 서버로 전송되지 않음
    -> 쿠키보다 더 많은 자료 보관 가능
  • 저장 형태: 쿠키는 문자열 / 웹 스토리지는 키(key)-값(value) 쌍
  • 데이터 저장 용량: 쿠키는 4KB / 웹 스토리지는 약 5MB

웹 스토리지 두 종류

  1. 로컬 스토리지
  2. 세션 스토리지

로컬 스토리지 (localStorage)

  • 브라우저 닫아도 사라지지 않음(로그인 상태 유지 원할 때 사용)
  • 도메인마다 따라 저장됨(다른 도메인의 로컬 스토리지 알 수 없음)
  • 동일한 오리진(domain/port/protocol)을 가진 모든 창에서 공유됨
    -> 창A에서 데이터 설정하고 창B에서 받아오기 가능

세션 스토리지 (sessionStorage)

  • 새로고침해도 유지됨 but 브라우저 닫고 열 때는 사라짐(브라우저 재시작 때마다 로그인하게 하고 싶을 때 사용 o)
  • 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장됨( 단위로 생성)
    하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됨.

localStorage에 비해 sessionStorage는 제약이 많아 잘 사용되지 않음!

profile
일단 해보기🐢

0개의 댓글