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?

It could be preferences set in the browser, available disk space on each computer or some other environmental difference. — jfriend00, Jun 01 '14 at 07:35
Related question: http://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values — jfriend00, Jun 01 '14 at 07:39
try 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) { debugger console.log("Local Storage is full, Please empty data"); // fires When localstorage gets full // you can handle error here ot emply the local storage } — jinal, Oct 13 '17 at 12:44

score 27 · Answer 1 · edited Jan 06 '19 at 04:22

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
 }

score 10 · Answer 2 · answered Apr 03 '20 at 18:20

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.

score 6 · Answer 3 · answered Nov 28 '16 at 07:16

6

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

answered Nov 28 '16 at 07:16

Willie Zou

77
1
3

5

According to [What is the max size of localStorage values?](https://stackoverflow.com/a/2989317/381802) you are wrong. – erikvimz Aug 02 '18 at 15:31

score 6 · Answer 4 · answered Jun 25 '20 at 02:55

6

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

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

answered Jun 25 '20 at 02:55

Diego Fortes

7,095
3
24
37

score 3 · Answer 5 · answered Dec 10 '15 at 09:22

3

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.

answered Dec 10 '15 at 09:22

computnik

247
1
3
15

What you said is correct, but I gave the answer with a link that might prove what I tried explaining. I dont think we can run a code snippet here which would give those results. Or is there a way to do that too? – computnik Dec 10 '15 at 10:02

score -2 · Answer 6 · answered Jan 28 '21 at 14:55

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)));
  }
};

Setting the value of 'dataURL' exceeded the quota

6 Answers6

Linked