永久性存储有助于防止关键数据被逐出,并降低数据丢失的可能性。
面临磁盘空间不足等存储压力时,浏览器通常会从最近最少使用的来源中逐出数据,包括从 Cache 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 将权限请求委托给用户。请求永久性存储空间时,系统会通过一个界面弹出窗口提示用户,询问他们是否允许网站将数据存储在永久性存储空间中。
什么存储空间受永久性存储的保护?
如果授予永久性存储权限,浏览器不会逐出存储在以下位置的数据:
- Cache API
- Cookie
- DOM 存储(本地存储)
- File System API(浏览器提供的沙盒文件系统)
- IndexedDB
- Service Worker
- 应用缓存(已弃用,不应使用)
- WebSQL(已弃用,不应使用)
如何关闭永久性存储
目前,无法通过编程方式告知浏览器您不再需要永久性存储。
总结
Chrome 团队的研究表明,虽然可能,存储的数据很少会被 Chrome 自动清除。为了保护可能未存储在云端或会导致大量数据丢失的关键数据,永久性存储空间可以有效地确保当本地设备面临存储压力时,浏览器不会移除您的数据。请记住,仅在用户最有可能需要永久性存储空间时请求永久性存储空间。
谢谢
特别感谢 Victor Costan 和 Joe Medley 对本文的评价。 感谢 Chris Wilson 撰写,本文的原始版本首次出现在 WebFundamentals 上。
Umberto 在 Unshot 上使用的主打图片