Setting the value of 'dataURL' exceeded the quota

Question

I have a JavaScript code which save string to the Local storage, the string size is 400000,

var dataURL = canvas.toDataURL("image/jpg").toString(); localStorage.setItem("dataURL", dataURL); 

I open the html file from chrome, in one computer its OK in the other computer i get

Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'dataURL' exceeded the quota.

In this computer I allowed to save string length no more than 100000 chars. Both computers have the same chrome's Version 35.0.1916.114 m Why?

Answer 1

When your browser reaches to maximum limit it will throw this error Failed to execute 'setItem' on 'Storage': Setting the value of '' exceeded the quota.

• You can handle it like this

 try {       var count = 100;       var message = "LocalStorageIsNOTFull";       for (var i = 0; i <= count; count + 250) {           message += message;           localStorage.setItem("stringData", message);           console.log(localStorage);           console.log(count);       }     }   catch (e) {       console.log("Local Storage is full, Please empty data");       // fires When localstorage gets full       // you can handle error here or empty the local storage   }

Answer 2

This type of error can also occur due to following reason :

There is a limit to which you can store value in single localStorage key.

For example, if I write localStorage.setItem('data',allData); then there is a limit set to 'data' key which can store specified number of characters in 'allData' value.

In chrome and firefox you can store upto 5200000 characters in a single key.You can check your browser limit by visiting this site https://arty.name/localstorage.html

So to fix this issue you have to check the number of characters that you are trying to store in a single key.

If you are exceeding the localStorage key's value size, then you have to decrease the size to appropriate limit.