永久存储

持久性存储有助于保护关键数据免遭逐出,并降低数据丢失的风险。

当面临存储压力(例如磁盘空间不足)时,浏览器通常会从最久未使用的来源逐出数据,包括来自 Cache API 和 IndexedDB 的数据。如果应用尚未与服务器同步数据,这可能会导致数据丢失;此外,移除应用运行所需的资源也会降低应用的可靠性,这两者都会导致负面的用户体验。

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

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

Browser Support

  • Chrome: 55.
  • Edge: 79.
  • Firefox: 57.
  • Safari: 15.2.

Source

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

检查您网站的存储空间是否已标记为持久性

您可以使用 JavaScript 来确定网站的存储空间是否已标记为持久性。调用 navigator.storage.persisted() 会返回一个 Promise,该 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,该 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 在网站请求持久性存储时显示的弹出式窗口。

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

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

  • Cache API
  • Cookie
  • DOM 存储空间(本地存储空间)
  • File System API(浏览器提供的沙盒文件系统)
  • IndexedDB
  • Service Worker
  • 应用缓存(已弃用,请勿使用)
  • WebSQL(已废弃,请勿使用)

如何关闭永久性存储

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

总结

Chrome 团队的研究表明,虽然 Chrome 可能会自动清除存储的数据,但这种情况很少发生。为了保护可能未存储在云端或会导致严重数据损失的关键数据,永久性存储可以成为一个有用的工具,确保当本地设备面临存储压力时,浏览器不会移除您的数据。请注意,只有在用户最有可能需要持久性存储空间时才请求。

谢谢

特别感谢 Victor Costan 和 Joe Medley 审核本文档。 感谢 Chris Wilson 撰写了本文档的原始版本,该版本最初发布在 WebFundamentals 上。