管理 HTML5 离线存储

HTML5 引入了许多存储 API,可让您在用户的浏览器本地存储大量数据。但是,默认情况下,为每个应用分配的空间量被限制为几兆字节。Google Chrome 可让您申请更大的存储空间配额,不再局限于之前的 5 MB 上限。

本文档介绍了与 Chrome 中使用的存储设备类型有关的基本概念,并介绍了可用于管理存储空间配额的实验性 Quota Management API。本文档假定您已熟悉客户端存储的一般概念,并了解如何使用离线 API。

目录

  1. 存储类型
    1. 临时重定向
    2. 持久性
    3. 无限制
    4. 比较存储类型
  2. 管理配额
    1. 查询存储空间用量和可用性
    2. 请求更多存储空间
    3. 重置测试配额
  3. API 参考文档
    1. 常量
    2. 方法概览
    3. 方法
  4. 未来开发

存储类型

在 Google Chrome 中,您可以请求使用三种类型的存储空间:

以下各部分更详细地介绍了这些存储类型,并在下面的表格中进行了比较。

临时存储

临时存储是可供任何 Web 应用使用的临时存储。Chrome 会自动为您的应用提供临时存储空间,因此您无需请求分配。

共享池

临时存储空间由在浏览器中运行的所有 Web 应用共享。共享池的大小不得超过可用磁盘空间的 1/3。应用已使用的存储空间包含在共享池的计算中;也就是说,计算是基于 (available storage space + storage being used by apps) * .333 的。

每个应用最多可拥有 20% 的共享池。例如,如果可用总磁盘空间为 60 GB,共享池为 20 GB,应用最多可以有 4 GB。可用磁盘空间的 20%(最多 4 GB)为可用磁盘空间 (60 GB) 的 1/3(最多 20 GB)。

需要更多空间

虽然您可以查询您的应用可用的存储空间量以及已经为应用存储的数据量,但您无法要求获得更多临时存储空间。如果应用超出分配的配额,则会抛出错误。

存储空间不足

超出整个池的存储配额后,系统会删除为最近最少使用的主机存储的全部数据。但是,浏览器不会清除 LocalStorage 和 SessionStorage 中的数据。对于存储在其他离线 API 中的数据,浏览器会删除全部(而非部分)数据,以免应用数据以意外方式损坏。

由于每个应用所占的存储池的大小上限为 20%,因此仅当用户当前运行的 5 个以上离线应用且每个应用都使用最大存储空间时,系统才有可能删除数据。

但是,随着用户在硬盘上添加的文件越来越多,可用存储空间会缩小。当可用磁盘空间不足时(请注意,共享池仅获得当前可用磁盘空间的一半),浏览器会删除为最近最少使用的主机存储的所有数据。

永久性存储空间

永久性存储是保留在浏览器中的存储,除非用户将其清除。它仅适用于使用 File System API 的应用,但最终将可供其他离线 API(例如 IndexedDB 和应用缓存)使用。

应用的永久性存储空间配额可以大于临时存储空间,但您必须使用 Quota Management API 申请存储空间,并且用户必须授予您使用更多空间的权限。Chrome 会显示一个信息栏,提示用户授予应用更多本地存储空间。

无限存储空间

无限存储空间与永久性存储空间类似,但仅适用于 Chrome 应用和扩展程序(.crx 文件)。无限存储空间的大小仅受用户硬盘空间的可用限制。您可以在应用扩展程序的清单文件中请求 unlimitedStorage 权限。在安装时,系统会告知用户应用或扩展程序所需的权限。通过继续安装,用户会隐式向 manifest.json 文件中列出其网址的所有页面授予权限。

如需了解详情,请参阅应用扩展程序各自的开发者指南。

比较存储类型

下表介绍了这三种存储类型之间的区别。

 临时存储永久性存储空间无限存储空间
基本说明

可供任何 Web 应用使用的临时存储。

系统会自动执行,不需要提出请求。

必须通过 Quota Management API 请求并由用户授予的永久存储。

用于存放 Chrome 扩展程序和应用的永久存储空间。

该权限在清单文件中设置,且必须由用户授予。

适用的国家/地区

所有 Web 应用。

所有 Web 应用。Chrome 扩展程序以及托管和安装的 Web 应用独有。
权限无。您无需明确请求即可使用它。

您必须使用 Quota Management API 申请更多存储空间。

您可以在应用扩展程序的清单文件中请求 unlimitedStorage 权限。
首次使用时的用户体验对用户不可见。应用只会运行。

Chrome 会显示一个信息栏,提示用户接受或拒绝存储空间请求。

但是,如果您请求的配额量实际上小于应用的当前分配量,则系统不会显示任何提示。较大的配额会保留。

在安装时,系统会告知用户应用或扩展程序所需的权限。通过继续安装,用户隐式地向应用扩展程序的 manifest.json 文件中列出其网址的所有页面授予权限。

后续请求增加存储空间时的用户体验不适用。您无法要求增加临时存储空间。

Chrome 再次提示用户。

 

无论应用或扩展程序申请增加配额,Chrome 都不会在安装完成后提示用户。
数据的持久性

暂时性。浏览器会删除这些数据。

永久性。除非用户指示,否则浏览器不会删除数据。数据在后续访问中可用。

不要假定数据是永久性的,因为用户可以将其删除。

与永久性存储空间相同。

 

默认存储空间

最多共用共用池的 20%。

0 MB。您必须明确要求提供特定存储空间。

0 MB。您必须在清单文件中明确请求使用 unlimitedStorage

如果您未指定存储空间要求,Chrome 会从临时存储空间的共享池中为应用分配存储空间。

最大存储空间最多共用共用池的 20%。与硬盘上的可用空间相同。它没有固定的存储空间池。与硬盘上的可用空间相同。
推荐的使用情形正在缓存。可离线运行或拥有大量资产的应用。设计为在 Google Chrome 中运行的应用。
可以使用该 API 的 API

离线 API

  • 应用缓存
  • 文件系统
  • IndexedDB
  • WebSQL(自 2010 年 11 月 18 日起弃用

注意:LocalStorage 和 SessionStorage 等网络存储 API 仍固定为 5 MB。

File System API

离线 API

  • 应用缓存
  • 文件系统
  • IndexedDB
  • WebSQL(已弃用)

注意:LocalStorage 和 SessionStorage 等网络存储 API 仍固定为 5 MB。

管理您的配额

借助 Chrome 13 中引入的 Quota Management API,您可以执行以下操作:

该 API 是使用全局对象 window.webkitStorageInfo 实现的。

如需查看参考文档,请参阅下一部分

查询存储空间用量和可用性

如需查询正在使用的存储空间大小和主机剩余可用空间,请使用以下命令调用 queryUsageAndQuota()

  • 您要检查的存储空间类型
  • 成功回调

API 报告的使用量可能与用户数据的实际大小不一致,因为每个存储空间可能需要一些额外的字节来存储其元数据。此外,状态更新可能会延迟,从而导致 API 无法反映最新的存储状态。

以下代码段展示了如何查询存储空间:

// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
    function(usedBytes, grantedBytes) {
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    },
    function(e) { console.log('Error', e);  }
);

如果您想查询永久性存储空间的状态,只需将 webkitStorageInfo.TEMPORARY 替换为 webkitStorageInfo.PERSISTENT 即可。该枚举也位于 window 对象(全局命名空间)中,因此您也可以使用 window.PERSISTENTwindow.TEMPORARY

需要更多存储空间

您无需请求更多临时存储空间,因为分配是自动进行的,并且您不能超出上限(如表格中所述)。

对于 File System API 的永久性存储,默认配额为 0,因此您需要明确请求应用的存储。使用以下命令调用 requestQuota()

  • 存储设备类型
  • 大小
  • 成功回调

可能会发生以下情况,具体取决于您的请求:

  • 如果您请求更高的配额,浏览器会显示一个信息栏,并提示用户授予或拒绝增加配额的权限。在某些情况下,请求可能会被静默拒绝,并返回当前配额或更小的配额。
  • 如果您申请的配额量少于应用的当前分配量,系统不会显示任何提示。
  • 如果您请求的存储空间超出允许的上限,您会收到错误消息 (QUOTA_EXCEEDED_ERR)。
  • 如果您在用户已授予权限后再次调用 requestQuota(),则系统不会执行任何操作。因此,无需再次调用该方法。

下面展示了如何请求更多存储空间:

// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);
});

重置测试配额

在应用中测试存储空间时,您可能需要清除存储的数据,以便在应用中重新测试配额管理。为此,请执行以下操作:

  1. 在多功能框(地址栏)中输入 chrome://settings/cookies
  2. 搜索您的应用。
  3. 选择您的应用。
  4. 点击选中部分内容右侧的 X

API 参考文档

本部分介绍了 Quota Management API 的方法。

常量

以下是 webkitStorageInfo 常量,用于指示存储类型。

常量说明
TEMPORARY0临时存储。
PERSISTENT1永久性存储。

方法概览

queryUsageAndQuota
requestQuota

方法

queryUsageAndQuota

检查使用的存储空间大小以及主机的剩余可用空间。

 // you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
      successCallback,
      errorCallback);
  • successCallback:带有两个参数的可选回调:

    • 应用当前正在使用的字节数。
    • 配额中剩余的字节数。
  • errorCallback:可选的错误回调。

requestQuota

请求更多存储空间。浏览器会显示一个信息栏,提示用户授予或拒绝应用获得更多存储空间的权限。

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);
参数
  • newQuotaInBytes:您希望占用的存储空间配额的字节数。
  • successCallback:传递已授予字节数的可选回调。
  • errorCallback:可选的错误回调。

未来开发

我们计划将所有 HTML5 离线存储 API(包括 IndexedDB、应用缓存、文件系统和可能指定的其他 API)放在 Quota Management API 下。您可以使用它管理所有存储空间分配。