When sessionStorage Says "No": Understanding the QuotaExceededError

I recently launched a simple browser based tool called Image Viewer, which lets you quickly preview image files such as JPG, JPEG, PNG, WebP, BMP, GIF and several other common formats.

You can try it here: Free Online Image Viewer – View Images in Your Browser

The idea was straightforward. When a user selected an image, the script temporarily stored it using sessionStorage() so it could be accessed on the next page to display the image and its EXIF metadata. Everything worked perfectly during testing with smaller images.

Then one day, the browser had other plans.

Instead of storing the image, it threw this error:

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

At first, it looked like a bug in my code. But the real culprit was the browser's storage limit.

Why This Error Occurs (QuotaExceededError)

Both sessionStorage and localStorage provide a limited amount of storage, typically around 5 MB per origin. Remember, the exact limit varies by browser.

The problem becomes even more noticeable when you store an image as a Base64 encoded string. Base64 encoding increases the size of the data by roughly 33%. So, a perfectly normal image can exceed the available storage much sooner than expected.

What we learned and what we can do differently?

Browser storage is great for saving lightweight information like user preferences, IDs, or temporary application state. It's not designed for storing large image files.

If your application needs to preview images, there are better alternatives.

1. Use URL.createObjectURL() to generate a temporary URL for the selected file. For example,

img.src = URL.createObjectURL(file);

2. Keep the File object in memory while the page is active.

3. Use IndexedDB if you genuinely need to store larger files in the browser.

4. Upload the image to a server if long term storage is required.

Conclusion

The error doesn't necessarily mean your code is incorrect.

It simply means you've reached the browser's storage quota. You just crossed the limit.

For my Image Viewer, which supports formats like JPG, JPEG, PNG, WebP, BMP, GIF and others, this was a good reminder that sessionStorage is intended for small pieces of data, not image files. Sometimes the simplest implementation works, until the browser reminds you about its limits.

← Previous