永久存储

永久性存储有助于保护关键数据免遭驱逐,并降低数据丢失的可能性。

当面临磁盘空间不足等存储压力时,浏览器通常会从最近使用时间最早的源中逐出数据,包括 Cache API 和 IndexedDB 中的数据。如果应用尚未与服务器同步数据,这可能会导致数据丢失,还会移除应用正常运行所需的资源,进而降低应用的可靠性,这两种情况都会导致负面的用户体验。

幸运的是,Chrome 团队的研究表明,Chrome 很少会自动清除数据。用户手动清除存储空间的情况要常见。因此,如果用户经常访问您的网站,您的数据被逐出的可能性很小。为防止浏览器删除您的数据,您可以请求将整个网站的存储空间标记为永久性。

许多现代浏览器都支持永久性存储。

浏览器支持

  • 55
  • 79
  • 57
  • 15.2

来源

如需详细了解逐出、可存储的数据量以及如何处理配额限制,请参阅网页版存储空间

检查网站的存储空间是否已标记为永久性磁盘

您可以使用 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 会将权限请求委托给用户。请求永久性存储空间时,它会向用户显示一个界面弹出式窗口,询问他们是否允许网站将数据存储在永久性存储空间中。

当网站请求永久存储时,Firefox 显示的弹出式窗口。
当网站请求永久性存储空间时,Firefox 会显示弹出式窗口。

哪些存储受永久性存储保护?

如果授予了永久性存储权限,浏览器将不会逐出存储在以下位置的数据:

  • 缓存 API
  • Cookie
  • DOM 存储(本地存储)
  • File System API(由浏览器提供且在沙盒中运行的文件系统)
  • IndexedDB
  • Service Worker
  • 应用缓存(已弃用,不应使用)
  • WebSQL(已弃用,不应使用)

如何停用永久性存储空间

目前,无法以程序化方式告知浏览器您不再需要永久性存储空间。

总结

Chrome 团队的研究表明,存储的数据虽然可能被 Chrome 自动清除,但很少会被自动清除。为了保护可能未存储在云端或可能导致大量数据丢失的关键数据,永久性存储是一款非常实用的工具,可确保本地设备面临存储压力时,浏览器不会移除您的数据。请注意,请仅在用户最有可能需要时才请求永久性存储空间。

此致

特别感谢 Victor Costan 和 Joe Medley 审核本文。 感谢 Chris Wilson 撰写的本文原始版本首次发布在 WebFundamentals 上。

主打图片,由 Umberto 制作,在 Unsplash 用户