영구 스토리지는 중요한 데이터가 제거되지 않도록 보호하고 데이터 손실 가능성을 줄이는 데 도움이 될 수 있습니다.
디스크 공간 부족과 같은 저장 압박에 직면하면 브라우저는 일반적으로 가장 오래전에 사용한 출처에서 Cache API, IndexedDB 등의 데이터를 삭제합니다. 이로 인해 앱이 데이터를 서버와 동기화하지 않은 경우 데이터가 손실되고 앱이 작동하는 데 필요한 리소스가 삭제되어 앱의 안정성이 저하될 수 있으며, 이는 부정적인 사용자 경험으로 이어집니다.
다행히 Chrome팀의 연구에 따르면 Chrome에서 데이터를 자동으로 삭제하는 경우는 거의 없습니다. 사용자가 저장소를 수동으로 비우는 것이 훨씬 더 일반적입니다. 따라서 사용자가 사이트를 정기적으로 방문하는 경우 데이터가 제거될 확률은 거의 없습니다. 브라우저에서 데이터를 삭제하지 못하게 하려면 전체 사이트의 저장소를 영구 스토리지로 표시하도록 요청할 수 있습니다.
영구 저장소는 많은 최신 브라우저에서 지원됩니다.
제거, 저장할 수 있는 용량, 할당량 제한 처리 방법에 관한 자세한 내용은 웹용 스토리지를 참고하세요.
사이트의 스토리지가 영구 스토리지로 표시되었는지 확인
JavaScript를 사용하여 사이트의 스토리지가 영구 스토리지로 표시되었는지 확인할 수 있습니다. navigator.storage.persisted()를 호출하면 불리언으로 확인되는 프로미스가 반환되며, 이는 저장소가 유지된 것으로 표시되었는지 나타냅니다.
// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
const isPersisted = await navigator.storage.persisted();
console.log(`Persisted storage granted: ${isPersisted}`);
}
영구 스토리지는 언제 요청해야 하나요?
스토리지를 영구으로 표시하도록 요청하는 가장 좋은 때는 중요한 사용자 데이터를 저장할 때이며, 요청은 사용자 동작으로 래핑되는 것이 이상적입니다. 페이지 로드 또는 기타 부트스트랩 코드에서 영구 저장소를 요청하지 마세요. 브라우저에서 사용자에게 권한을 요청하는 메시지가 표시될 수 있습니다. 사용자가 저장되어야 한다고 생각되는 작업을 하지 않는다면 프롬프트에 혼란을 야기할 수 있으며 요청을 거부할 가능성이 높습니다. 또한 메시지를 너무 자주 표시하지 마세요. 사용자가 권한을 부여하지 않기로 결정했다면 다음 저장 시 즉시 메시지를 다시 표시하지 않습니다.
영구 스토리지 요청
사이트 데이터의 영구 저장소를 요청하려면 navigator.storage.persist()를 호출하세요. 이 메서드는 영구 스토리지 권한이 부여되었는지 여부를 나타내는 부울로 확인되는 프로미스를 반환합니다.
// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
const isPersisted = await navigator.storage.persist();
console.log(`Persisted storage granted: ${isPersisted}`);
}
권한은 어떻게 부여되나요?
영구 저장소는 권한으로 취급됩니다. 브라우저는 다양한 요소를 사용하여 영구 저장소 권한을 부여할지 여부를 결정합니다.
Chrome 및 기타 Chromium 기반 브라우저
Chrome 및 기타 대부분의 Chromium 기반 브라우저는 권한 요청을 자동으로 처리하며 사용자에게 메시지를 표시하지 않습니다. 대신 중요한 사이트로 간주되는 경우 영구 저장소 권한이 자동으로 부여되고, 그렇지 않은 경우에는 자동으로 거부됩니다.
사이트가 중요한지 판단하는 휴리스틱은 다음과 같습니다.
- 사이트 참여 수준은 어느 정도인가요?
- 사이트가 설치되었거나 북마크에 추가되어 있나요?
- 사이트에 알림 표시 권한이 부여되었나요?
요청이 거부된 경우 나중에 다시 요청할 수 있으며 동일한 휴리스틱을 사용하여 평가됩니다.
Firefox
Firefox는 권한 요청을 사용자에게 위임합니다. 영구 저장소가 요청되면 사이트에서 영구 저장소에 데이터를 저장하도록 허용할지 묻는 UI 팝업이 사용자에게 표시됩니다.
어떤 스토리지가 영구 스토리지로 보호되나요?
영구 스토리지 권한이 부여되면 브라우저는 다음 위치에 저장된 데이터를 제거하지 않습니다.
- 캐시 API
- 쿠키
- DOM 저장소 (로컬 저장소)
- File System API (브라우저에서 제공하는 샌드박스 파일 시스템)
- IndexedDB
- 서비스 워커
- 앱 캐시 (지원 중단됨, 사용해서는 안 됨)
- WebSQL (지원 중단됨, 사용해서는 안 됨)
영구 스토리지 사용 중지 방법
현재로서는 더 이상 영구 저장소가 필요하지 않다고 브라우저에 알리는 프로그래매틱 방법이 없습니다.
결론
Chrome팀의 연구에 따르면 저장된 데이터는 가능하지만 Chrome에서 자동으로 삭제되는 경우는 거의 없는 것으로 나타났습니다. 클라우드에 저장되지 않거나 상당한 데이터 손실을 초래하는 중요한 데이터를 보호하려는 경우 영구 저장소는 로컬 기기에 저장 압력에 직면했을 때 브라우저에서 데이터를 삭제하지 않도록 하는 유용한 도구가 될 수 있습니다. 사용자가 원할 가능성이 가장 높을 때만 영구 저장소를 요청해야 합니다.
감사합니다.
이 기사를 검토해 주신 Victor Costan과 Joe Medley에게 특별히 감사드립니다. WebFundamentals에 처음 게재된 이 문서의 원본 버전을 작성한 크리스 윌슨에게 감사드립니다.
히어로 이미지: Umberto(Unsplash)