Web Storage는 브라우저에서 문자열 키와 값을 저장하는 기능으로, localStorage와 sessionStorage를 제공한다. 테마나 작성 중인 입력값 같은 작은 상태를 보관할 때 사용할 수 있다. 서버에 저장되는 데이터베이스나 모든 기기에서 공유되는 계정 저장소와는 다르다.
저장 범위와 수명
localStorage는 출처별로 구분되며 브라우저를 닫았다가 다시 열어도 일반적으로 유지된다. sessionStorage는 출처와 탭 단위로 구분되고 해당 탭의 세션에 연결된다. 같은 서비스처럼 보여도 프로토콜이나 호스트가 달라지면 저장 영역이 달라질 수 있다. 이 구분은 동일 출처 정책과 함께 이해하면 좋다.
작은 설정을 저장하는 예
사용자가 위키의 표시 테마를 선택하면 localStorage.setItem('theme', 'dark')로 값을 저장하고 다음 방문에 읽을 수 있다. 객체는 그대로 저장하는 대신 JSON 문자열로 직렬화하는 방식이 흔하다. 읽을 때는 값이 없거나 예상과 다를 수 있고, 이전 버전의 데이터가 남아 있을 수도 있으므로 기본값과 변환 실패 처리를 둔다. 관련 공식 설명.
쿠키와 다른 점
Web Storage의 값은 일반적인 요청마다 쿠키처럼 자동 첨부되지 않는다. 쿠키는 서버가 세션 상태를 식별하는 데 사용될 수 있지만, Web Storage를 쓴다고 서버 로그인이 자동 유지되는 것은 아니다. 두 기능은 수명과 전송 방식이 다르므로 목적을 먼저 구분해야 한다. 같은 출처에서 실행되는 스크립트가 접근할 수 있다는 점도 고려한다.
용량과 성능 한계
Web Storage 작업은 동기적으로 수행된다. 큰 데이터를 반복해서 읽고 쓰면 주 실행 흐름에 부담을 줄 수 있어 대량 구조화 데이터에는 IndexedDB를 검토한다. 저장 한도와 비공개 탐색 정책은 브라우저 조건에 따라 달라질 수 있고 사용자가 저장 데이터를 지울 수도 있다. 따라서 중요한 문서의 유일한 사본으로 취급하지 않는다. 로그인 비밀값을 넣는 문제는 단순 편의성보다 스크립트 접근과 서비스의 인증 설계를 함께 검토해야 한다.
참고: 공식 개발 문서.