web storage vs cookie

Jayden ·2025년 3월 23일

서버에서 전송하는 작은 정보 기록 파일(4kb)
과거에 브라우저에 정보를 저장하는 유일한 방법이었음.
브라우저에 저장 이후 모든 HTTP 요청에 쿠키 정보 전송
문자열만 저장가능
HttpOnly : 클라이언트 (자바스크립트)에서 쿠키를 사용할 수 없게함, document.cookie 같이 쿠기에 접근하고, 조작하는 것을 방지
Secure : HTTPS로 통신하는 경우에만 쿠키가 전송

브라우저에 2MB 이상의 데이터를 저장 가능.
문자열 및 객체 형태로 저장가능. 단, 객체 데이터 저장 시에는 JSON.stringfy()로 객체 문자열로, 저장된 값을 가져올시
JSON.parse()로 가져와 사용
쿠키와는 다르게 서버와 통신을 위해서는 브라우저(자바스크립트)에서 값을 읽어 통신시 전송해야 함
sessionStorage : 페이지의 세션이 유지되는 동안 origin별로 스토리지를 관리, 창이 종료될 경우 데이터에 접근 불가, localstorage 보다 제한적으로 사용
localStorage : origin이 같을 경우, 여러 탭과 창에서 공유, 컴퓨터 종료시나 브라우저 종료시에서 지속.
메서드
- getItem(key) : 키값에 해당하는 value값 가져오기
- setItem(key, value) : 키에 해당하는 value 설정
- removeItem(key) : 키에 해당하는 value 삭제
- clear() : 저장된 모든 값 삭제

프론트엔드 개발자