管理 HTML5 离线存储

HTML5 引入了许多存储 API,可让您在用户的本地存储 。但是,默认情况下,系统为每个应用分配的空间量有限, MB。Chrome 浏览器可让您请求更大的存储空间配额,而超出了之前 5 MB。

本文档向您介绍了与 Chrome 和 介绍了实验性配额管理 API,该 API 可让您管理存储空间配额。通过 本文档假定您已熟悉客户端存储的一般概念, 了解如何使用离线 API。

目录

  1. 存储空间类型 <ph type="x-smartling-placeholder">
      </ph>
    1. 临时重定向
    2. 永久性
    3. 无限制
    4. 比较存储类型
  2. 管理配额 <ph type="x-smartling-placeholder">
      </ph>
    1. 查询存储空间用量和可用性
    2. 申请更多存储空间
    3. 重置测试配额
  3. API 参考文档 <ph type="x-smartling-placeholder">
      </ph>
    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),共 1/3(最多 20 GB)的可用磁盘空间 (60 GB)。

请求释放更多空间

虽然您可以查询应用的可用存储空间量 已存储的数据,您不能请求更多临时存储空间。如果应用 超出分配的配额,系统将抛出错误。

存储空间不足

一旦超出整个池的存储配额,所有存储数据量最少 最近使用的主机会被删除。不过,浏览器不会清除 LocalStorage 中的数据,并且 SessionStorage 创建的。对于存储在其他离线 API 中的数据,浏览器会完整删除数据,而不是删除 在一定程度上确保应用数据不会意外损坏。

由于每个应用的存储池所占的存储空间上限为 20%,因此仅当 目前正在运行的离线应用超过了五个,每个应用都占用了最大存储空间。

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

永久性存储空间

永久性存储空间是保留在浏览器中的存储空间,除非用户将其彻底清空。可以使用 仅适用于使用 File System API 的应用,但最终将可供其他离线 API 使用 例如 IndexedDB 和 Application Cache。

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

无限存储空间

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

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

比较存储类型

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

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

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

它是自动的,不需要请求。

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

永久存储 Chrome 扩展程序和应用。

此权限是在清单文件中设置的,必须由用户授予。

适用的国家/地区

所有 Web 应用。

所有 Web 应用。Chrome 扩展程序以及托管和安装的网络应用所独有的。
权限无。您可以在不明确请求的情况下使用。

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

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

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

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

在安装时,系统会告知用户应用或扩展程序所需的权限。继续安装即表示用户已隐式授予对应用扩展程序的 manifest.json 文件中网址列示的所有页面的权限。

后续请求增加存储空间时的用户体验不适用。您不能请求获取更多临时存储空间。

Chrome 会再次提示用户。

 

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

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

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

不要认为数据是永久性的,因为用户可以删除数据。

与永久性存储相同。

 

默认存储空间

最多占共享池的 20%。

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

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

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

存储空间上限最多占共享池的 20%。与硬盘的可用空间相同。它没有固定的存储空间池。与硬盘的可用空间相同。
建议的用例缓存。可离线运行或拥有大量资产的应用。专门在 Google Chrome 中运行的应用。
可使用该功能的 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.PERSISTENT会员价为 webkitStorageInfo.TEMPORARY。该枚举也在 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 都置入 Google 中,包括 IndexedDB、Application Cache、File 系统 API 和可能指定的其他 API - 在配额下 Management API。您可以通过它管理所有存储空间分配。