javascript - How to get free local storage quota? -

this question has answer here:

• how find size of localstorage 13 answers

how amount of free quota in applications local storage?

i need remaining storage amount in bytes, kilobytes, megabytes or in percentage. nice visual display of how free quota have in local storage.

thanks!

edit: please note "answer own guestion" style post , therefore cannot make better guestion. focus on answer because guestion in title , there not more that.

here jsfiddle cross browser (including mobile browsers) solution. please note may need allow 'unsafe' scripts in order work in jsfiddle not require permission in own use. can remaining local storage quota using following code. alerts if local storage full.

html

<h2>remaining local storage quota</h2>  <p id="quotaoutputtext"></p> <p id="quotaoutputpercenttext"></p>  <div id="visualfreequota"><div id="visualquotafill"></div></div>  <br/>  <button id="getquota">get free quota visually</button><button id="fillquota">fill quota 900 kb</button><button id="clearlocalstorage">clear local storage</button> 

css

#visualfreequota{      height: 20px;     width: 390px;     border: 1px solid black;     visibility: hidden;  }  #visualquotafill {      background-color: #000000;     height: 20px;     width: 0px;  } 

javascript

$(document).ready(function() {  //"get free quota visually" button's functionality $("#getquota").click(function() {      $("#visualfreequota").css("visibility","visible");     $("#getquota").prop("disabled", true); //disables button in order prevent browser slowing down because of button spam (cannot spam 900 kb of data in local storage performance)  });  //"fill quota 900 kb" button's functionality $("#fillquota").click(function() {      $("#fillquota").prop("disabled", true);     var filldata = "";      if(localstorage.getitem("filledquota")) {          filldata = localstorage.getitem("filledquota");      }      //fills local storage 900 kb     for(var = 0; < 1000001; i++) {          filldata += "add9bytes"; //adds 9 bytes of data in variable          if(i === 100000) {              try {                  localstorage.setitem("filledquota", filldata); //saves data local storage once in loop increased performance              }catch(e) {                  //alerts user if local storage not have enough free space                 alert("local storage not have free 900 kb!");               };          }      }      setoutputquota();      settimeout(function() {          $("#fillquota").prop("disabled", false);      }, 500);  }); //"fill quota 900 kb" button's functionality end  //"clear local storage" button's functionality $("#clearlocalstorage").click(function() {      localstorage.clear();     setoutputquota();  });  //sets free local storage quota on document.ready when no buttons yet pressed setoutputquota();  });  //returns amount of remaining free bytes in local storage quota function getremainingquotainbytes() {      return 1024 * 1024 * 5 - unescape(encodeuricomponent(json.stringify(localstorage))).length;  }  //returns % of free local storage quota function getremainingquotainpercent() {      return math.round((1024 * 1024 * 5 - unescape(encodeuricomponent(json.stringify(localstorage))).length) / (1024 * 1024 * 5) * 100);  }  //sets quota texts function setoutputquota() {      $("#visualquotafill").css("width", parseint($("#visualfreequota").css("width")) / 100 * (100 - getremainingquotainpercent()) + "px");     $("#quotaoutputtext").text(math.round(getremainingquotainbytes() / 1000) + " kb free in local storage");     $("#quotaoutputpercenttext").text(getremainingquotainpercent() + " % of quota free in local storage");  }