3.3Storage

1. localStorage

브라우저에 영구적으로 데이터를 저장하는 동기형 스토리지

• 웹 브라우저에 내장된 저장소로, 사용자가 브라우저를 닫거나 컴퓨터를 꺼도 데이터가 유지된다.
• 동일한 도메인(origin) 안에선 모든 탭과 창이 데이터를 공유한다. 즉, protocol, domain, port 3가지가 같으면 다른 탭이나 창에서 열렸더라도 데이터를 공유한다.
• 문자열(string)만 저장할 수 있다.
• 동기형 스토리지기 때문에, main thread를 차단할 수도 있다.
• 브라우저마다 상이하지만, 약 5~10MB를 저장할 수 있다.

javascript
// 저장
localStorage.setItem('theme', 'dark');

// 불러오기
const theme = localStorage.getItem('theme');

// 삭제
localStorage.removeItem('theme');

localStorage는 현대 브라우저(Edge, Chrome, Safari, Firefox)라면 모두 개발자 도구에서 볼 수 있다. Chrome 기준으로, Application 탭을 열면 왼쪽 사이드바에 Storage 메뉴 아래에서 볼 수 있다(sessionStorage 역시 여기서 확인 가능하다).

localStorage는 사용자의 명시적 동의 없이 작동한다. 즉, 웹사이트가 JavaScript로 localStorage.setItem()을 호출하면 별도의 동의 절차 없이 데이터가 저장된다. 심지어 엄격한걸로 유명한 GDPR(유럽의 개인정보보호법)에서도 사용자 추적 목적의 저장은 동의가 필요하지만, 일반적인 localStorage 자체는 동의 절차 없이 저장할 수 있다.

이는 localStorage에서 저장하는 데이터가 주로 간단한 사용자 설정, UI 상태, 캐시 등 서버와 관계없는, 비민감한 데이터이기 때문이다. 앞서 본 이 블로그에서 저장하는 문자열도 다크모드 설정, 언어 설정 정도였는데 이외에도 localStorage는 최근 방문 페이지(마지막으로 열었던 페이지 경로)나 캐시 데이터(API 요청 결과를 잠시 저장해서 새로고침 후에도 유지), 장바구니(비회원 장바구니 상품 목록) 저장에 쓰이는 정도다.

localStorage는 동기적 스토리지이기 때문에, 아주 큰 문자열을 저장하거나 하면 UI 렌더링, 클릭 이벤트, 스크롤 등을 불편하게 만들 수도 있다. 따라서 localStorage는 작고 빠른 데이터만 저장하는 용도로 써야하고, 큰 데이터를 다뤄야한다면 IndexedDB 같은 비동기 스토리지를 써야 한다.

사용자가 그렇다고 이 데이터를 계속 가지고 있어야하는 것은 아니다. 브라우저 설정의 개인정보 항목에서 사이트 데이터/쿠키 삭제 메뉴를 통해 직접 데이터를 삭제할 수 있다.

2. sessionStorage

브라우저 탭(세션) 단위로 유지되는 임시 스토리지

• localStorage와 거의 동일한 API를 가지지만, 탭이나 창을 닫으면 데이터가 즉시 삭제된다.
  • 브라우저의 Session이 끝날 때 함께 데이터가 사라진다.
• 문자열(string)만 저장할 수 있다.
• 동기형 스토리지기 때문에, main thread를 차단할 수도 있다.
• 브라우저마다 상이하지만, 약 5~10MB를 저장할 수 있다.

주로 페이지 내의 form에 적은 임시 데이터, 사용자가 새로고침하더라도 잠시 유지해야 하는 값, 탭 단위 상태(장바구니 등)를 저장한다.

javascript
// 저장
sessionStorage.setItem('draft', '문서');

// 불러오기
const draft = sessionStorage.getItem('draft');

// 삭제: 세션 전체를 비운다.
sessionStorage.clear();

sessionStorage도 마찬가지로 브라우저의 개발자 도구에서 확인할 수 있다. 다만, localStorage와 달리 브라우저 탭을 닫는 순간 sessionStorage 데이터는 사라진다.

sessionStorage에 저장하는 데이터는 새로고침 시엔 유지되지만, 탭을 닫으면 사라져야 하는 데이터가 적합하다. 예를 들어, 사용자가 글을 작성중에 뭔가 문제가 있어 새로고침하는 페이지에서의 글 내용(form 등), 로그인 중 임시 토큰, API 요청 캐시 등이다. 이 블로그엔 sessionStorage를 활용하는 로직이 없다.