영구 저장소

영구 스토리지는 중요한 데이터가 제거되지 않도록 보호하고 데이터 손실 가능성을 줄이는 데 도움이 될 수 있습니다.

Pete LePage

디스크 공간 부족과 같은 저장 압박에 직면하면 브라우저는 일반적으로 Cache API, IndexedDB 등을 포함한 데이터를 삭제합니다. 데이터를 가져올 수 있습니다 앱 실행 시 데이터가 손실될 수 있습니다. 서버와 동기화하지 않은 것으로 간주되어 앱의 안정성이 저하될 수 있습니다. 앱이 작동하는 데 필요한 리소스를 제거하여 부정적인 사용자 경험

다행히 Chrome 팀의 연구에 따르면 데이터가 Chrome에서 자동으로 삭제됩니다. 사용자가 Kubernetes에서 수동으로 스토리지를 비웁니다. 따라서 사용자가 사이트를 정기적으로 방문하는 경우 데이터가 제거됩니다 브라우저가 삭제되지 않도록 하려면 다음 단계를 따르세요. 사이트의 전체 스토리지를 표시하도록 요청할 수 있습니다. 영구적입니다

영구 저장소는 많은 최신 브라우저에서 지원됩니다.

제거, 저장할 수 있는 용량, 할당량 처리 방법에 대해 자세히 알아보기 제한사항은 웹용 스토리지를 참고하세요.

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

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 팝업이 표시됩니다. 영구 스토리지에 데이터를 저장할 수 있습니다

</ph> <ph type="x-smartling-placeholder">

어떤 스토리지가 영구 스토리지로 보호되나요?

영구 저장소 권한이 부여되면 브라우저가 제거되지 않습니다. 저장된 데이터 위치:

• 캐시 API
• 쿠키
• DOM 저장소 (로컬 저장소)
• File System API (브라우저에서 제공하는 샌드박스 파일 시스템)
• IndexedDB
• 서비스 워커
• 앱 캐시 (지원 중단됨, 사용해서는 안 됨)
• WebSQL (지원 중단됨, 사용해서는 안 됨)

영구 스토리지 사용 중지 방법

현재로서는 브라우저에 더 이상 영구 스토리지가 필요합니다

결론

Chrome 팀의 연구에 따르면 저장된 데이터는 가능하지만 Chrome에서 자동으로 삭제되는 경우가 거의 없습니다. 중요한 데이터를 클라우드에 저장되지 않는 경우 상당한 데이터 손실을 야기할 수 있습니다. 영구 스토리지는 데이터에 로컬 기기가 저장 압력에 직면했을 때 브라우저에서 삭제합니다. 영구 저장소는 사용자가 영구 저장소를 사용할 가능성이 가장 높은 경우에만 요청하는 것을 잊지 마세요 있습니다.

감사합니다.

이 기사를 검토해 주신 Victor Costan과 Joe Medley에게 특별히 감사드립니다. 이 기사의 원본 버전을 쓴 Chris Wilson 씨에게도 WebFundamentals에 처음 등장했습니다.

히어로 이미지: Umberto(Unsplash)