쿠키?
- 만료 기한이 있는 키-값 저장소
- 매 서버 요청마다 서버로 쿠키가 같이 전송된다. (서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌다.)
👉 서버에 필요한 용량 이상의 데이터를 사용할 경우 데이터 낭비가 발생한다.
👉👉 그러한 데이터들을 로컬스토리지와 세션스토리지에 저장할 수 있다.- ex) 다시 보지 않음 팝업 창
웹 스토리지
로컬 스토리지 / 세션 스토리지
- 쿠키의 단점을 보완하여 HTML5에서 추가된 저장소
- 쿠키와 달리 서버로 자동 전송되지 않는다.
- 데이터 영구성의 차이가 있다.
- 키-밸류 스토리지 형태
- 키, 값 모두 문자열로 변환된다.
👉 다른 타입의 데이터를 저장하려고 할 때 문자형으로 변환하므로 문제 발생
localStorage.setItem('obj', {a: 1, b: 2})
// undefined
localStorage.getItem('obj')
// [object Object]
String(1)
// 1
String({a:1, b: 2})
// [object Object]- 위와 같은 문제를 해결하기 위해 JSON형태로 데이터를 읽고 쓴다.
JSON.stringify를 사용하여 읽고JSON.parse로 받는다.
localStorage.setItem('json', JSON.stringify({a: 1, b:2 })
// undefined
JSON.parse(localStorage.getItem('json'))
// {a: 1, b: 2}
localStorage.setItem('nums', JSON.stringify([1, 2, 3]))
// undefined
JSON.parse(localeStroge.getItem('nums'))
// [1, 2, 3]로컬 스토리지
- window.localStorage에 위치한다.
- 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. (영구적)
(계속해서 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당)
👉 지속적으로 필요한 데이터을 저장할 때- ex) 자동 로그인 저장
세션 스토리지
- window.sessionStorage에 위치한다.
- 윈도우나 브라우저 탭을 닫을 경우 제거된다. (영구적X)
👉 잠깐 동안 필요한 정보를 저장할 때- ex) 일회성 로그인 정보
<참고>
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
https://www.daleseo.com/js-web-storage/
