Setting the value of 'dataURL' exceeded the quota

JavascriptHtmlGoogle ChromeLocal Storage

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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

 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

Solution 2 - Javascript

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

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.

Solution 3 - Javascript

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

Solution 4 - Javascript

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

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

Solution 5 - Javascript

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

Solution 6 - Javascript

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


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOrtal Blumenfeld LagzielView Question on Stackoverflow
Solution 1 - JavascriptjinalView Answer on Stackoverflow
Solution 2 - Javascriptuser7425786View Answer on Stackoverflow
Solution 3 - JavascriptWillie ZouView Answer on Stackoverflow
Solution 4 - JavascriptDiego FortesView Answer on Stackoverflow
Solution 5 - JavascriptcomputnikView Answer on Stackoverflow
Solution 6 - JavascriptShamli KirubaView Answer on Stackoverflow