What Web Can Do Today?

There were several attempts made, mostly by Google Chrome, to allow Web applications to query the system for the size of the storage space currently used and available for the application. The most recent one, Quota Estimation API, includes also a way to request the stored data to be persisted by the browser that would otherwise be wiped out in case the system signalled memory pressure. The permission to request this persistent storage capability might be granted by the browser based on the heuristic (i.e. Google Chrome) or might require explicit user consent (i.e. Firefox).

The older implementation, supported only in Chrome with webkit- prefix, maintained a separation between the temporary and persistent storage and allowed the Web applications to request for more storage space, if needed.

API glimpse

Live Demo

• JavaScript

  if ('storage' in navigator && 'estimate' in navigator.storage) {
    navigator.storage.estimate()
      .then(estimate => {
        document.getElementById('usage').innerHTML = estimate.usage;
        document.getElementById('quota').innerHTML = estimate.quota;
        document.getElementById('percent').innerHTML = (estimate.usage * 100 / estimate.quota).toFixed(0);
      });
  }
  
  if ('storage' in navigator && 'persisted' in navigator.storage) {
    navigator.storage.persisted()
      .then(persisted => {
        document.getElementById('persisted').innerHTML = persisted ? 'persisted' : 'not persisted';
      });
  }
  
  function requestPersistence() {
    if ('storage' in navigator && 'persist' in navigator.storage) {
      navigator.storage.persist()
        .then(persisted => {
          document.getElementById('persisted').innerHTML = persisted ? 'persisted' : 'not persisted';
        });
    }
  }

• HTML

  <p>Estimated storage usage is <b id="usage">unknown</b> bytes.</p>
  <p>Estimated storage quota is <b id="quota">unknown</b> bytes.</p>
  <p>Estimated usage is <b id="percent">unknown</b>%.</p>
  <p>Persistent storage status is <b id="persisted">unknown</b>.</p>
  <p><button onclick="requestPersistence()">Request persistent storage</button></p>

Resources

• Specification Draft
• Quota limitations analysis