영구 스토리지

영구 스토리지를 사용하면 중요한 데이터를 삭제로부터 보호하고 데이터 손실 가능성을 줄일 수 있습니다.

Pete LePage

디스크 공간 부족과 같은 스토리지 압박에 직면하면 브라우저는 일반적으로 캐시 API 및 IndexedDB를 포함한 데이터를 가장 오래 전에 사용된 출처에서 삭제합니다. 이렇게 하면 앱이 데이터를 서버와 동기화하지 않은 경우 데이터가 손실될 수 있으며 앱이 작동하는 데 필요한 리소스를 삭제하여 앱의 안정성이 저하될 수 있습니다. 둘 다 부정적인 사용자 환경으로 이어집니다.

다행히 Chrome팀의 연구에 따르면 Chrome에서 데이터를 자동으로 삭제하는 경우는 매우 드뭅니다. 사용자가 수동으로 스토리지를 삭제하는 것이 훨씬 더 일반적입니다. 따라서 사용자가 사이트를 정기적으로 방문하는 경우 데이터가 삭제될 가능성은 작습니다. 브라우저에서 데이터를 삭제하지 못하도록 하려면 전체 사이트의 스토리지를 영구적으로 표시하도록 요청하면 됩니다.

영구 스토리지는 많은 최신 브라우저에서 지원됩니다.

삭제, 저장할 수 있는 용량, 할당량 제한을 처리하는 방법을 자세히 알아보려면 웹용 스토리지를 참고하세요.

사이트의 스토리지가 영구적으로 표시되었는지 확인

JavaScript를 사용하여 사이트의 스토리지가 영구적으로 표시되었는지 확인할 수 있습니다. navigator.storage.persisted()를 호출하면 스토리지가 영구적으로 표시되었는지 나타내는 불리언으로 확인되는 Promise가 반환됩니다.

// 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()를 호출하세요. 영구 스토리지 권한이 부여되었는지 나타내는 불리언으로 확인되는 Promise가 반환됩니다.

// 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 스토리지 (로컬 스토리지)
• 파일 시스템 API (브라우저 제공 및 샌드박스 처리된 파일 시스템)
• IndexedDB
• 서비스 워커
• 앱 캐시 (지원 중단됨, 사용하지 마세요)
• WebSQL (지원 중단됨, 사용하지 마세요)

영구 스토리지를 사용 중지하는 방법

현재는 더 이상 영구 스토리지가 필요하지 않다고 브라우저에 알리는 프로그래매틱 방법이 없습니다.

결론

Chrome팀의 연구에 따르면 가능은 하지만 Chrome에서 저장된 데이터를 자동으로 삭제하는 경우는 드뭅니다. 클라우드에 저장되지 않거나 상당한 데이터 손실이 발생할 수 있는 중요한 데이터를 보호하기 위해 영구 스토리지는 로컬 기기가 스토리지 압박에 직면했을 때 브라우저에서 데이터가 삭제되지 않도록 하는 데 유용한 도구가 될 수 있습니다. 사용자가 영구 스토리지를 원할 가능성이 가장 높은 경우에만 영구 스토리지를 요청하세요.

감사합니다.

이 문서를 검토해 주신 Victor Costan님과 Joe Medley님께 특별히 감사드립니다. WebFundamentals에 처음 게재된 이 문서의 원본 버전을 작성한 Chris Wilson님께 감사드립니다.