웹 스토리지, IndexedDB, Cache API를 비교해 보자!!

사내 프로젝트 진행 중 프론트 구현에 앞서 도입해볼만 한 것을 비교, 고려 해보려고 정리하려고 합니다. 

 

웹 스토리지

• 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다.
• 키와 기능 자체는 유사하지만 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못함,
• 웹 스토리지는 약 5MB까지 저장 공간 이용 가능
• Key-Value 구조 형태

캐시 스토리지 API ( Cache Storage API )

• 서비스 워커 ( Service Worker )가 제공하는 기능 중 하나
• 네트워크 리소스나 파일 기반의 콘텐츠가 필수적일때 사용하면 좋음 ( css, js image 등 정적 자원 )

IndexedDB

• 색인이 포함된 JSON 객체가 모여있는 트랜잭셔널 로컬 데이터베이스를 위해 W3C가 원고한 웹 브라우저 표준 인터페이스의 하나
• key-value의 구조로 데이터 관리, B-Tree 데이터 구조
• Index를 이용해 빠르게 검색 가능
• JavaScript가 이해하는 어떤 값이라도 모두 저장 가능
• 용량 제한은 없으나, HDD 저장소 상태나 브라우저 상태에 따라 달라짐
•  

스토리지들별 비교

	저장 용량	데이터모델	트랜잭션	동기 / 비동기	비고
IndexedDB	많은 데이터 저장	하이브리드	o	비동기
Session Storage	5,10MB(문자열만)	key-value	x	동기	탭 안에서만 유효 ( 현재 탭에서만 사용하는 IndexdedDB 키를 잠시 저장하는 것과 같이 작은 용량 데이터 저장 시 적합 ) 탭 안에서만 유효하기 때문에 웹 워커나 서비스 워커 접근 x
Local Storage	5,10MB(문자열만)	key-value	x	동기
Cookies	문자열만 저장	구조적	x	비동기	HTTP 요청이 있을 떄마다 외부로 함께 전달되기 때문에 데이터를 조금만 저장해도 소모하는 전체 데이터 양이 급격하게 늘 수 있음, 웹 워커 접근 x
File System		바이트 스트림	x	비동기	크롬 기반 브라우저에서만 동작
Cache API		key-value	x	비동기
Web SQL	-	-	-	-	최근 브라우저들에서 지원 중단, 2010년 스펙 관리 중단

IndexedDb 저장 가능 용량

브라우저	용량
Chrome	사용자 디스크 용량의 60% StorageManage API 를 활용하면 저장 가능 최대 용량 확인 가능
Edge	크롬과 동일
FireFox	빈 디스크 용량의 50%
Safari	1GB까지 저장 가능 용량을 다 사용하면 용량 제한을 200MB 더 늘릴 것인지 팝업이 뜸

반응형

스토리지 사용량 확인 방법

• StorageManager API 를 활용해 확인 가능, IndexexdDB, 캐시 API가 사용하고 있는 용량을 바이트단위로 확인 가능

if (navigator.storage && navigator.storage.estimate) { 
	const quota = await navigator.storage.estimate(); 
	// quota.usage -> 사용 중인 용량(byte)
	// quota.quota -> 사용할 수 있는 전체 용량(byte) 
	const percentageUsed = (quota.usage / quota.quota) * 100;
	console.log(`사용할 수 있는 용량의 ${percentageUsed}%를 사용하고 있습니다.`); 
	const remaining = quota.quota - quota.usage; 
	console.log(`앞으로 ${remaining} 바이트를 더 사용할 수 있습니다.`); 
}

브라우저가 StorageManager API를 지원하더라도 사용할 수 있다고 하는 용량이 실제로 사용할 수 있는 용량을 넘어가는 경우가 있다. ( 사용량을 넘어가는 에러 (over-quota errors ) )

용량 제한 에러 ( over-quota-errors ) 처리 방법

저장할 수 있는 용량을 모두 사용하면 QuotaExceededError 에러 발생

문제 해결 방법 : 오랫동안 사용하지 않는 데이터 삭제, 저장된 용량을 확인하면서 데이터를 조금씩 삭제, 사용자가 지정한 데이터를 지우는 방법

용량 제한을 넘어가면 IndexedDB와 캐시 API는 모두 QuotaExceededError라는 DOMError 에러 발생

 

IndexedDB

• 공식 크롬에서는 용량 제한을 넘어가면 IndexedDB 쓰기 동작 실패 이때 onabort() 핸들러가 실행되면서 에러 이벤트가 인자로 전달됨, 에러 이벤트의 이름은 QuotaExceededError, 에러 이벤트 객체에서 DomException 확인 가능

const transaction = idb.transaction(['entries'], 'readwrite'); 

transaction.onabort = function(event) { 
	const error = event.target.error; // DOMException 
	if (error.name == 'QuotaExceededError') { 
		// 실패했을 때 실행되는 코드 
	} 
};

캐시 API

• 공식 크롬에서 용량 제한을 넘어가면 캐시 API가 promise 형태로 QuotaExceededError  반환

try { 
	const cache = await caches.open('my-cache'); 
	await cache.add(new Request('/sample1.jpg')); 
} catch (err) { 
	if (error.name === 'QuotaExceededError') { 
		// 실패했을 때 실행되는 코드 
	} 
}

데이터 삭제 방식

웹스토리지

• 최적화( Best Effort ) 스토리지 : 사용자 개입 없이 브라우저가 자동으로 데이터를 비움, 오래 보관할 데이터나 중요한 데이터가 지워질 수 있음
  • 종류 : IndexdedDB, 캐시 API, 기타 스토리지들 ( 따로 데이터 보존을 지정하지 않으면, 디바이스 용량이 꽉 차면 브라우저가 데이터를 자동으로 지움 )
  • 동작방식 : 크롬 기반 브라우저들은 디바이스 용량이 부족할 때 가장 오래된 데이터부터 지움.
• 데이터 보존 ( Persistent ) 스토리지 : 저장 공간을 많이 사용하더라도 데이터가 자동으로 지워지지 않음, 브라우저 설정으로 사용자가 직접 비워야함.( https://web.dev/persistent-storage/ )

 

 

IndexedDB 활용사례 및 라이브러리

활용 사례 : https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/indexeddb-best-practices

라이브러리 : https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

 

 

참고 블로그

 

• https://han41858.tistory.com/54
• https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614
• https://tristan91.tistory.com/521
• https://antonio1926.github.io/2021-01-26-web-storage

쿠키, 세션, 로컬 스토리지, 세션스토리지, indexedDB, 캐시

웹 스토리지 : 무엇을 써야할까요?