Going Local or Session in Storage

On occasion, a Developer will need to have some specific user data persist specifically with the browser/view component of an application. When forging my current portfolio, I introduced changing themes and wanted theme to persist. Enter Local Storage.

When writing this post, I wanted to chat just about local storage and looked at the documentation. And, it made a clear distinction on where it differs from session storage. Gosh, another rabbit hole. What is session storage?

So let’s start with where both come from, which is the Storage object located in the Web Storage API. I know, I’m including more terms and suddenly this is an Inception like spiral of terms related to web development. But I’ll keep these deeper levels a bit shallow as we. move back up quickly.

In short, the Web Storage API is a provider which allows your browser to store data as key-value pairs. Why? The function is to allow a more intuitive option when compared to. using cookies. Now, The Web Storage API has two main components, localStorage and sessionStorage.

To access these objects, we need to use Window object and evoke using Window.sessionStorage and Window.localStorage. This will create a storage object available for use in setting, retrieving and deleting data.

Both, session and local objects store data, run independent of a server and have higher storage limits than a cookie.

Where they differ is this. A session object creates unique sessions with each new tab a user opens in the app or browser. Each page is a session that lasts until the page is closed, refreshes and restores don’t erase the data. It also boasts a limit of 5MB, for reference. Once, closed sessions objects are all cleared, like a blank slate.

As for our local storage object, data inside the object persists. Much like a twinkie ( according to urban myth) they have no real expiration date. Objects retain data unless removed by a Javascript function, clearing the cache or locally stored data. While it varies, data limits are closer to 10MB based on the browser, which is an optimization to avoid excess memory usage and performance issues with web storage.

Now for my portfolio, I used local Storage. So you can keep the theme light or dark consistently. In case you are not a fan of the light (default) you can always revisit and the theme will be consistently dark should you return.

All in all, another rabbit hole managed. But now, maybe a use for session Storage in a future project? Time will tell.

Till next time. =)