如何使用导航器替代window.webkitStorageInfo HTML5文件系统API？

Question

所以在这里发现了一个类似的帖子 html-5-filesystem-access-type-error。然而，我对结论不是很满意，因为我觉得它实际上没有回答问题 - 给出的解决方案是过时的代码解决方案。有人知道如何使用navigator而不是window吗？ 我一直在使用以下内容，并且它有效，但Chrome控制台不断告诉我不要这样做，因为它已被弃用。 有效但已弃用的代码

window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024*280, function(grantedBytes) {
    window.webkitRequestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); 
}, function(e) {
    console.log('Error', e); 
});

注意：onInitFs和errorHandler都是在其他地方定义并可用的函数。

控制台日志 - 我在控制台中得到的信息如下：

'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage'
or 'navigator.webkitPersistentStorage' instead. 

因此，最好的做法是停止使用已弃用的方法。不幸的是，当我将window替换为navigator时，它会崩溃(请参见下面)。如何使用navigator而不是window来访问文件系统？

- Arthur Weborg

Answer 1

以下是两个使用当前API的示例。

它使用navigator.webkitPersistentStorage.requestQuota而不是已弃用的window.webkitStorageInfo.queryUsageAndQuota：

查询配额

navigator.webkitTemporaryStorage.queryUsageAndQuota ( 
    function(usedBytes, grantedBytes) {  
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    }, 
    function(e) { console.log('Error', e);  }
);

申请配额

var requestedBytes = 1024*1024*280; 

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {  
        console.log('we were granted ', grantedBytes, 'bytes');

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

您需要选择临时 (webkitTemporaryStorage) 或永久 (webkitPersistentStorage) 存储来查询。

当前Chrome实现跟踪此具体规范版本，其中描述了一些内容: http://www.w3.org/TR/2012/WD-quota-api-20120703/

chromestore.js 提供了一个更易于使用的API来获取这些数据。

---

回答您最初的问题，您的新代码将如下所示:

请求配额并初始化文件系统

var requestedBytes = 1024*1024*280; 

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

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

- Paul Irish

---

嗨，我在 TypeScript 中遇到了错误：“[ts] Property 'webkitTemporaryStorage' does not exist on type 'Navigator'”，你能帮我解决一下吗？ - kamalav

Answer 2

错误信息告诉您要使用 navigator.webkitTemporaryStorage 或 navigator.webkitPersistentStorage，而您尝试使用的是 navigator.webkitStorageInfo，它是 undefined。

更新： 不应将 PERSISTENT 传递给 navigator.webkitTemporaryStorage 或 navigator.webkitPersistentStorage，而仅应将其传递给 window.webkitRequestFileSystem。然后就没有错误了。（参见：Chrome v27 & v29中文件系统API无法工作）

- dievardump

---

好的，你说得对，我本来希望那样可以让程序正常运行！但是很遗憾，它给了我一个不同的错误。我已经更新了上面的代码。感谢你的帮助。 - Arthur Weborg

Answer 3

最近，我花了一些时间为具有持久性存储的文件系统API创建了一个名为Chromestore.js的抽象层。我使用了这里讨论的相同解决方案来修复抽象层中的错误。但是使用这个API，就不需要担心它并且很干净。

https://github.com/summera/chromestore.js

它提供了一些非常方便的额外功能。它肯定需要进一步扩展，我计划很快就会做到。任何建议/反馈都非常感谢！这将使使用FileSystem API的人更容易。特别是那些试图存储从远程服务器检索的大量数据的人。示例和文档在这里：https://github.com/summera/chromestore.js/blob/master/chromestore-api.md。我认为这有潜力通过数据和文件系统API做一些真正有趣的事情。干杯！

- Ari