웹 스토리지는 쿠키와 비슷하게 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능이다.
클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미한다.
클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이 된다. (↔ 세션)
매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다.
SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있다. (CSRF 취약)
대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재한다.
대부분의 브라우저가 지원한다.
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.
키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다.
쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않는다. (명시적으로만 전송 가능)
쿠키와 달리, 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없다. 다른 도메인에서 요청하는 경우에는, 꺼내 쓰고 싶어도 도메인 단위로 접근이 제한되는 특성 덕분에 값을 꺼내 쓸 수 없다. (CSRF 안전)
쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다.
HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.
종류로는 로컬 스토리지(Local Storage) 와 세션 스토리지(Session Storage) 가 있다. 이들은 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드들을 가진다. 이 둘의 가장 큰 차이점은 데이터의 영구성이다.
window.localStorage 객체
브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장된다.
도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능하다.
서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.
지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인 등)
window.sessionStorage 객체
세션 쿠키와 달리, 탭/윈도우 단위로 세션 스토리지가 생성된다.
즉 window 객체와 동일한 유효 범위 및 생존 기간을 가지며, 탭/윈도우를 닫을 시 데이터가 삭제된다.
또한 동일한 탭/윈도우라도 다른 도메인이라면 또 다른 세션 스토리지가 생성된다.
서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 입력 폼 저장, 일회성 로그인 등)