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
The issue may happen due to timing when localStorage is created and API is called in the event loop. first, need to create localStorage and try to access localStroge and then make a API call. — Shah Vipul, Jun 27 '22 at 09:13

score 33 · 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 21 · 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 11 · Answer 3 · answered Jun 25 '20 at 02:55

11

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

8,830
3
32
42

score 5 · Answer 4 · answered Nov 28 '16 at 07:16

5

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

75
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
No. As of `Chrome 104` it is 5,200,000 bytes – avalanche1 Aug 25 '22 at 16:06

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

287
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 -3 · 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