Save Javascript variables between pages

My use case for the thing in a topic is: how to store the table sort order between the table view and edit item pages. Every time my clients are jumping from the products list to the product edit page, I need to save their sort preferences. Sometimes I save also search parameters. Whatever is required to display the same list again.

You may use it to store visited pages (viewed products), application state, calculations you performed… You name it.

The important note is: do not use local or session storage as the security-related information storage. I will get to this later.

Session storage is realy easy

If you simply want to store some Javascript variables between pages, you can use session storage. Here is how you set variable:

sessionStorage.setItem("productsSort","by_name")

and here is how you retrieve it afterwards:

sessionStorage.getItem("productsSort")

Easy, isn’t it? But there are also some gotchas. You are not allowed to store complex values (objects, arrays) directly in the session storage. You have to convert them to JSON. The second thing is that there is still about 5% of browsers which doesn’t support session storage. Because of this, my complete code for sort order saving is:

// save only if session storage is available
if(typeof(sessionStorage) != 'undefined') {
    sessionStorage.setItem("productsSort", JSON.stringify(sortOrder));
}

Likewise, for sort order retrieval:

// set default sort order
sortOrder = [ "by_name", "ascending" ]
// read only if session storage is available
if(typeof(sessionStorage) != 'undefined') {
    // read only if exists
    if (sessionStorage.getItem("productsSort")) {
        sortOrder = JSON.parse(sessionStorage.getItem("productsSort"));
    }
}

JSON transformations allow me to store more complicated variables and additional security prevents the engine from unwanted behavior.

Want to store the data longer? Use Local Storage.

Session storage eventually expires. It is also not shared between the browser tabs. If you want to store the data “forever” or share them between browser tabs, you may want to use local storage instead of session storage. The usage is almost identical.

You may also be surprised that some of the libraries you are using are already utilizing local storage. Go to your website, open dev tools in your browser and enter “localStorage” in your console. Found anything? Surprised? Local storage is used by Google libraries, WordPress, not to mention Javascript frameworks.

Session and local storage limitations

As I mentioned before, you should not store any sensitive information in the browser’s local or session storage. These are easily accessible for everyone who can ope developer console or fire a piece of Javascript on your website.

There is also a volume limit – you can store up to 5MB of the data in session storage and 5MB in local storage – for most major browsers.

It is also not durable – it can be removed at any time by the user or by a piece of Javascript code. You should not rely on the data stored in the browser as the sole source of truth 🙂