javascript - How to use navigator instead of window.webkitStorageInfo HTML5 File-system API?

Question

So there is a similar post found here html-5-filesystem-access-type-error. However, I'm not very satisfied with the conclusion because I do not feel it actually answered the question - the solution given is the deprecated code solution. Does anyone know how to use navigator instead of window as the Chrome console is informing to do?

I have been using the following and it works, but the chrome console keeps informing me not to do so because it is deprecated.

Working Deprecated Code

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

Note: onInitFs and errorHandler are both functions defined elsewhere, that work.

Console Log - The message I get in the console is as follows:

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

So the best practice would be to stop using the deprecated method. Unfortunately, when I replace window with navigator it crashes (see below). How does one use navigator instead of window to access the file system?

Answer 1

Below are two examples with the current API.

It uses navigator.webkitPersistentStorage.requestQuota instead of the deprecated window.webkitStorageInfo.queryUsageAndQuota:

Query Quota

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

Request Quota

var requestedBytes = 1024*1024*280; 

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

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

You have to choose either temporary (webkitTemporaryStorage) or persistent (webkitPersistentStorage) storage to query.

The current Chrome implementation tracks this specific spec version, which describes things a bit more: http://www.w3.org/TR/2012/WD-quota-api-20120703/

chromestore.js provides an easier API for this data.

---

To answer your original question, your new code would look like this:

Request quota and initialize filesystem

var requestedBytes = 1024*1024*280; 

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

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