Setting the value of 'dataURL' exceeded the quota

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?

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
 }

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.

the chrome local storage default is 25M, so clear your chrome's local storage will be work it. good luck!

Clearing the local storage with localStorage.clear(); worked for me.

If you're on Firefox you may need to use window.localStorage.clear();

It depends on the browser preference and disk space. Compare your two computers' browsers here https://arty.name/localstorage.html and check if they store same no. of characters. You would see the difference.

The below code will let you save at-most amount of data in local storage without clearing it when storage exceeds.

const setInLocalStorage = (keyName, value) => {
  try {
      localStorage.setItem(keyName, JSON.stringify(value));
  } catch (error) {
      console.log('Error in local storage', error);
      setInLocalStorage(keyName, JSON.parse(localStorage.getItem(keyName)));
  }
};