Web Browser local storage

Modern web browsers allow us to store data in the client's browser: not larger chunks but smaller amounts when it's convenient.

Interface

To store the data to the localStorage from JS simply do:

localStorage.setItem('myCat', 'Tom');

or any other object (list, int, dict). Then to retrieve it:

let cat = localStorage.getItem('myCat');

and to remove it:

localStorage.removeItem('myCat');

or to clear all items in the local storage that belong to the current domain, we are on:

localStorage.clear();

There's another storage object sessionStorage. Same interface as local storage though session storage get's purged once the user leaves the site. Friendly note: I would avoid storing any sensitive data (personal or security) into the local storage.

Local storage status

Here's the thing. The local storage might not be available to us, or it might be full. So before we use the local storage in our web site code, we should check that we can.

Is local storage quota exceeded

We get depending on the browser certain amount of space per web page domain:

• Mobile:
• Chrome, Firefox: 10MB
• Safari, iOS WebView: 5MB
• Android Browser: 2MB
• Desktop:
• Chrome, Firefox, IE: 10MB
• Safari: 5MB

If we fill this space up with our web page, we won't be able to add any new elements to localStorage.

Is local storage available

Users can disable the use of local storage in the web browser. Most won't, but there are enough geeks out there to cause us trouble. So we need to be able to check if the use of local storage is allowed.

Side note: In Safari incognito mode, the localStorage is blocked and will throw a quota exceeded error. So we might want to check if the browser is in incognito mode to be on the safe side.

Get Local storage status

All right, let's write a function that will allow us to check if local storage is full and accessible.

The function below tries to set the test object into the local storage and then remove it. If an error occurs, we catch it with the try catch block and then analyze what happened.

Function get_local_storage_status() will give us the status of localStorage :

• full
• unavailable
• available

Full code:

function get_local_storage_status() {
	let test = "test";
    try {
        // try setting an item
        localStorage.setItem("test", test);
        localStorage.removeItem("test");
    }
    catch(e)
    {   
        // browser specific checks if local storage was exceeded
        if (e.name === "QUATA_EXCEEDED_ERR" // Chrome
            || e.name === "NS_ERROR_DOM_QUATA_REACHED" //Firefox/Safari
        ) {
            // local storage is full
            return "full";
        } else {
            try{
                if(localStorage.remainingSpace === 0) {// IE
                    // local storage is full
                    return "full";
                }
            }catch (e) {
                // localStorage.remainingSpace doesn't exist
            }
    
            // local storage might not be available
            return "unavailable";
        }
    }   
    return "available";
}

We can then run the function with:

get_local_storage_status();

Or display the status in the console:

console.log(get_local_storage_status())

A convenient test to see if our script works is to disable local storage, for example in Firefox by:

• Typing: about:config in your address bar and hit enter. You'll see browser settings.
• Search for dom.storage.enabled and change status to false. Double mouse click on the setting should do the change.

Add your script to an example website and check in the browser console for the status. If you managed to set up the Firefox settings correctly the console.log(get_local_storage_status()) should give you "unavailable" status.

When is local storage convenient

All right, we are equipped with the local storage. Now, where would we want to use it?

Let's say that the user internet connection drops down, and the user wants to leave the web site. But some data will be lost if the user leaves the web site in the offline mode. Then local storage could come to our aid. We store data in the local storage until user reconnects to the internet with our website again. Again don't store any sensitive data in the local storage.

Another use case of local storage would be to optimize the page load time by storing some page parts into the local storage. On the next load, just part of the page would have to be loaded.

There's one more edge case we didn't cover here. The user's web browser doesn't support HTML5 and localStorage at all. In that case well ...