영구 스토리지는 중요한 데이터가 제거되지 않도록 보호하고 데이터 손실 가능성을 줄이는 데 도움이 될 수 있습니다.
디스크 공간 부족과 같은 스토리지 압력이 발생하면 브라우저는 일반적으로 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에 처음 소개된 이 글의 원본 버전을 작성해 주신 Chris Wilson님께 감사드립니다.
Unsplash에 제공된 Umberto의 히어로 이미지