What are the details can be obtained from webkitStorageInfo.queryUsageAndQuota()

Question

webkitStorageInfo.queryUsageAndQuota() is used to find out the usage stats of the files that have been stored in the file system using the HTML5 file system API I suppose. Can anyone give me the details that can be obtained in the callback provided to this function.

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT, function() {
   //what all details can be obtained in this function as its arguments?
})

Exemplar

Answer 1

Replace function(){...} with console.log.bind(console), and you will find out.

> window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT, console.log.bind(console))
undefined  // Return value of ^
0 0        // Printed results, argument 0 and argument 1

The explanation of the callback is found here:

interface StorageInfo { 
  ....
  // Queries the current quota and how much data is stored for the host. 
  void queryUsageAndQuota( 
      unsigned short storageType, 
      optional StorageInfoUsageCallback successCallback, 
      optional StorageInfoErrorCallback errorCallback); 
  ...

[NoInterfaceObject, Callback=FunctionOnly] 
interface StorageInfoUsageCallback { 
  void handleEvent(unsigned long long currentUsageInBytes, 
                   unsigned long long currentQuotaInBytes); 
};

So, the first number indicates how many bytes are used,
the second number shows the quota's size.

Paradisiacal

Thanks Rob. And one more clarification, the size shown is in bytes right? – Exemplar

Answer 2

Below are two examples with the current API.

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

Query Quota

navigator.webkitPersistentStorage.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); }
);

Here we use navigator.webkitPersistentStorage to query and request persistent storage quota. You can also use navigator.webkitTemporaryStorage to work with temporary storage quota.

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

They also specifically explain the difference between temporary and permanent here: Temporary data is more like your tmp folder or a weak reference, in that, things might get deleted on the whim of the system, while permanent data should always inform the user before getting deleted.

You might want to start with a wrapper to escape all the browser compatibility hell that comes with working against Web APIs (many parts of the specs explicitly state: "This is a proposal and may change without any notices"). Dexie, for example, is an actively developed wrapper for IndexedDb.

chromestore.js is another wrapper (but has not been touched in years).

Julee

Plug for github.com/ebidel/filer.js, which is another helper on top of the Filesystem API and uses the updated quota API. – Stomodaeum

Answer 3

// Request storage usage and capacity left
window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.TEMPORARY, //the type can be either TEMPORARY or PERSISTENT
function(used, remaining) {
  console.log("Used quota: " + used + ", remaining quota: " + remaining);
}, function(e) {
  console.log('Error', e); 
} );

Where used and remaining are in bytes

Taken from google devlopers

Ademption