현재 프로젝트에서 검색 기능 구현 중 똑같은 검색어를 여러번 검색했을 때마다 API를 계쏙 호출하는 상황이 발생했고, 이를 해결하기 위해 cacheStorage를 활용하여 최적화 하기로 결정했다.
Cache
Cache란 데이터를 임시로 저장해 두는 메모리 영역 또는 저장소를 말합니다. 캐시는 데이터 접근 속도를 빠르게 하기 위해 사용되며, 시스템 성능을 향상시키는 데 중요한 역할을 합니다.
cacheStorage vs LocalStorage
cacheStorage와 localStorage는 웹 애플리케이션에서 데이터를 저장하고 관리하기 위한 두 가지 다른 메커니즘입니다. 각기 다른 목적과 특성을 가지고 있어 사용 사례에 따라 선택적으로 사용됩니다.
cacheStorage
cacheStorage는 서비스 워커(Service Worker)를 통해 웹 애플리케이션 리소스를 캐싱하기 위한 API입니다. 주로 PWA(Progressive Web Apps)에서 사용됩니다.
용도: 주로 HTML, CSS, JavaScript 파일, 이미지 등과 같은 네트워크 요청의 응답을 캐싱합니다.
스코프: 서비스 워커의 범위 내에서 작동합니다.
용량: 일반적으로 브라우저와 장치에 따라 다르지만, 로컬 저장소보다 크기가 큰 리소스를 저장할 수 있습니다.
만료 및 관리: 개발자가 캐시를 수동으로 관리해야 하며, 리소스 업데이트 시 새로운 버전을 캐싱할 수 있습니다.
localStorage는 브라우저 내에 키-값 쌍을 저장하기 위한 간단한 API입니다. 주로 사용자 설정이나 간단한 데이터 저장에 사용됩니다.
용도: 주로 사용자 설정, 상태 정보 등 간단한 데이터 저장에 사용됩니다.
스코프: 같은 오리진(도메인 및 프로토콜) 내에서만 접근 가능합니다.
용량: 일반적으로 약 5MB 정도로 제한됩니다.
만료 및 관리: 데이터가 만료되지 않으며, 사용자가 명시적으로 삭제하지 않는 한 브라우저에 계속 저장됩니다.
비교 요약
목적: cacheStorage는 네트워크 요청 응답을 캐싱하기 위해, localStorage는 키-값 쌍 데이터를 저장하기 위해 사용됩니다.
데이터 관리: cacheStorage는 개발자가 직접 캐시 관리를 해야 하며, localStorage는 브라우저가 자동으로 관리합니다.
용량 및 성능: cacheStorage는 더 큰 용량을 지원하고 네트워크 성능을 향상시키는 데 중점을 두며, localStorage는 작은 용량의 데이터를 쉽게 저장하고 빠르게 접근할 수 있습니다.
스코프 및 보안: 둘 다 같은 오리진 내에서만 접근 가능하지만, cacheStorage는 서비스 워커 범위 내에서만 동작하는 반면, localStorage는 모든 스크립트에서 접근 가능합니다.
