How I solved the LocalStorage “QuotaExceededError: DOM Exception 22"

We started working on a project called Aisle. The main objective of Aisle is to allow users to create rich, updated content and link them with the physical world. As the Front-end Developer of the team, I’m responsible for developing the Web Application for Aisle.

We use LocalStorage to store images (Base64 encoded) and other reusable resources. In doing so we encountered the “QuotaExceededError: DOM Exception 22", which is triggered when the local storage limit for a certain host has been exceeded. On Chrome 41 on OS X Yosemite 10.10, the limit was 5,200,000 characters (The test can be accessed here

The most obvious solution was to clear the localStorage whenever we encounter this error, but in doing so we would’ve needed to request the server for the deleted resources when the user loads a new view.

Instead of clearing the LocalStorage completely, we opted on maintaining a queue which contained “pointers” to the datastore (a Key-Value storage object). The last item of the queue contains the key which was accessed most recently and at the front is the key of the oldest value in the datastore. When the error is triggered, we shift the queue by one position and try adding the value again: this is repeated until data is successfully stored.

Code is available on

General Structure
Adding a new item to the datastore
Accessing a value from the datastore
Handling the exception
A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.