브라우저 내에 데이터를 저장하려면?
-
웹 스토리지
-
쿠키
위의 두 가지 방식 중 사용할 수 있다.
웹 스토리지 vs 쿠키
- 쿠키와 다르게 웹 스토리지는 네트워크 요청 시 서버로 전송되지 않음
-> 쿠키보다 더 많은 자료 보관 가능
- 저장 형태: 쿠키는 문자열 / 웹 스토리지는 키(key)-값(value) 쌍
- 데이터 저장 용량: 쿠키는 4KB / 웹 스토리지는 약 5MB
웹 스토리지 두 종류
- 로컬 스토리지
- 세션 스토리지
로컬 스토리지 (localStorage)
- 브라우저 닫아도 사라지지 않음(로그인 상태 유지 원할 때 사용)
- 도메인마다 따라 저장됨(다른 도메인의 로컬 스토리지 알 수 없음)
- 동일한 오리진(domain/port/protocol)을 가진 모든 창에서 공유됨
-> 창A에서 데이터 설정하고 창B에서 받아오기 가능
세션 스토리지 (sessionStorage)
- 새로고침해도 유지됨 but 브라우저 닫고 열 때는 사라짐(브라우저 재시작 때마다 로그인하게 하고 싶을 때 사용 o)
- 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장됨(탭 단위로 생성)
하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됨.
localStorage
에 비해 sessionStorage
는 제약이 많아 잘 사용되지 않음!