브라우저 저장소 총정리 (with 크롬 개발자도구)

개요 : 크롬 개발자도구를 통해 종류 파악하기

• 크롬 개발자도구 > Application 탭에 들어가면 사진과 같이 여러가지 브라우저 저장소를 확인할 수 있다.
  

• 해당 게시글은 이 Application 탭에서 확인할 수 있는 주요 저장소인 Local storage, Session storage, Cookie, Cache, IndexedDB의 각 특징과 쓰임새에 대해서 살펴보고자 한다. (HTML5 미만의 구형 브라우저에 대해서는 생각하지 않음)

• Extension storage : 외부 저장공간이 아닌 Chrome 확장 프로그램 저장용량을 뜻한다.

• 이는 모두 XSS 등에 의한 데이터 탈취 가능성이 존재하기 때문에, 민감한 정보는 BE단에서 처리하는 것이 좋다.

목차

• Web Storage API
  • 로컬 스토리지(Local storage)
  • 세션 스토리지(Session storage)
• IndexedDB
• 쿠키(Cookie)
• 캐시(Cache)
• Summary
• 마치며

---

Web Storage API

브라우저에 데이터를 간단히 저장하는 JS 기반 저장소 API

특징

• 쿠키(Cookie)와 유사하게 key-value 쌍을 이루어 브라우저 메모리에 데이터를 저장하나, 저장방식 자체는 쿠키와 상이하다.
• JS 객체를 통한 쉬운 접근이 가능하여 Web Storage API로 명명된다.
• Local, Session storage 각 scope에 따른 쓰임에 차이가 있다.

📓 Local storage

• 브라우저 탭 삭제시에도 데이터가 삭제되지 않고, 특정 유효기간도 존재하지 않는 저장소
• 테마 및 언어 설정 등의 반영구적이고, 민감정보가 아닌 데이터 저장 시 유용하다.

📝 Session storage

• 각 origin 별, 브라우저 탭 별로 귀속되어, 브라우저나 탭을 삭제하면 데이터도 함께 삭제된다. (새로고침은 OK)

• 💡 같은 origin의 여러 브라우저 탭이 존재할 경우
  • 각 탭은 서로 다른 session storage를 사용한다.
  • session storage의 scope는 탭에 귀속된다.

핸들링

• JS를 코드를 통한 접근 : localStorage, sessionStorage 변수 사용
• 사용자의 수동 조작 (권장X) : 개발자 도구를 통한 접근 등

---

📅 IndexedDB

브라우저 상의 noSQL 데이터베이스로 이해하면 쉽다.

특징

• 일반적인 noSQL처럼 데이터베이스를 생성하여 사용하고, 마찬가지로 key-value 쌍의 데이터를 저장한다.
• 트랜잭션 단위 요청, 여러가지의 자료구조가 저장 가능하며, 고용량의 저장공간을 지원한다.
• 모든 조작이 비동기 요청과 콜백 기반 구조다.
• JS를 통한 핸들링이 가능하나, Web Storage API에 비해 코드 구조가 복잡해질 수 있다.
  • 보통 idb, dexie등의 라이브러리를 함께 사용한다.

핸들링

• JS를 통한 접근 : window.indexedDB 변수 사용 (브라우저별 변수명 상이)
• 사용자의 수동 조작 (권장X) : 개발자 도구를 통한 접근 등 (데이터 조회, 삭제만 가능)

---

🍪 Cookie

현재는 Web Storage API의 등장으로 쿠키 사용 빈도가 많이 줄어들었으나, 특정 케이스에서 쿠키 사용이 최적인 경우가 존재한다.

특징

• 모든 HTTP request와 함께 전송된다.

  • 성능 저하가 발생할 수 있지만 서버에서의 제어가 가능하다.
  • 사용자 행동 트래킹 등 서버 데이터에 따라 클라이언트 데이터가 동기화 되어야 하는 경우 유리하다.

• 해당 도메인의 전역적인 설정과 관련된 데이터 설정 시 유리할 수 있다.

  • 테마, 언어 설정 등 개인화 옵션
  • 세션 관리에 필요한 자원 등

핸들링

HttpOnly 플래그가 설정된 쿠키 값은 JS를 통한 접근이 불가능하다.

• JS document.cookie를 통한 접근
• 서버 측에서의 만료시간, 보안 플래그(Secure, HttpOnly) 등을 설정하여 제어 (언어 / 환경 별 방법 상이)
• curl, postman 등 HTTP 클라이언트를 통한 접근
• 사용자의 설정 및 조작 : 브라우저 설정, 확장 프로그램, 개발자 도구(Network) 조작 등

---

📦 Cache

브라우저에서 자동으로 정적(static)인 컨텐츠를 저장하는 것을 의미한다.

특징

• 페이지에서 불러오는 정적 컨텐츠가 많을 경우, 캐시 메모리를 사용하면 로딩시간을 줄일 수 있다.
• 지정한 캐시 만료/갱신시간보다 정적 컨텐츠 업로드 주기가 빠를 경우, 최신버전이 반영되지 않을 수 있다.
  • 이 경우 캐시 갱신에 대한 핸들링이 필요하다.

• 💡 정적 컨텐츠

  • WAS(Web Application Server)와 WEB서버가 분리되어 있을 때, WEB서버에서 원활하게 구동되는 것들이다.
  • e.g. HTML, 이미지, JS(script) / CSS(style sheet) 등

핸들링

1. WEB 서버 혹은 response의 헤더 설정을 통한 cache-control(캐시 만료기간) 옵션 설정
2. 정적 컨텐츠 로드 시 조작 : 해시값(fingerprint) 사용, 쿼리스트링(ver=) 사용 (수기, 권장X)

일반 CSS 로드 예시 : style.css
해시값 사용 예시 : style.4dgjf63.css # 번들러로 자동 생성 가능

3. 서비스 워커를 통한 캐시 제어 : PWA(Progressive Web Application) 환경이거나 오프라인 기동이 필요한 경우에만 추천
4. 사용자의 캐시 갱신 (권장X) : 브라우저 캐시 제거, 개발자 도구 사용 등
5. 사용자의 캐시 최대값 설정 (권장X) : 브라우저 바로가기에 --disk-cache-size=${cache_size} 커맨드 설정(크롬 기준)

---

Summary : 모아보기

각 목적과 특징에 맞는 브라우저 저장소를 이용하자.

storage type	저장형태	(자동) 만료시간	특징
Local storage	key-value(string)	X	도메인 공유
Session storage	key-value(string)	브라우저 탭 유지 동안	도메인 공유
IndexedDB	다양한 자료구조	X	트랜잭션, 고용량
Cookie	key=value	Expires || Max-Age || X(세션쿠키)	HttpOnly 설정 가능
Cache	정적 컨텐츠 자체	브라우저 자동 설정	적절한 활용 시 성능 향상

마치며 : 토막지식

• 사생활보호 & 시크릿 모드 : cookie 저장소 자체를 사용하지 않거나, Web Storage API의 저장용량을 0바이트로 할당하는 일부 브라우저도 존재한다고 한다.
• Web Storage의 저장소 크기는 접속 환경별로 다르다 : 서드파티 쿠키 활성화 여부, 접속 브라우저 등에 따라 Web storage에 접근 가능한 크기는 상이할 수 있다.

참고 자료

• MDN
  • Web Storage API (ko)
  • IndexedDB API(ko / en)
  • IndexedDB key characteristics and basic terminology (en)
  • HTTP Cookie (ko)
  • Set-Cookie (ko)
  • Service Worker(en)
• 기타 기술 블로그
  • WHATWG - local storage
  • imgix docs - Fingerprinting Images to Improve Page Load Speed
• stack overflow
  • What is the maximum amount of data that a browser (for example: Chrome) can store in cache?