Share

In this article we will examine the local storage and session storage javascript Apis, What’s the difference and deciding what to use.

In web applications when it comes to thinking of a way to store data in the browser, there are many ways. The traditional methods is the using of cookies. But cookies has some limitations and disadvantages.

Among these limitations the size of the data you want to store into the cookie as browser cookies is limited 4096 bytes. So if the size of data is bigger than this the cookie not saved at all. Another limitation is that cookies not secure all the time as it’s stored on the user’s computer. Also the creation of the cookie is pretty difficult compared to session or local storage.

LocalStorage and SessionStorage

Javascript localstorage and sessionstorage Objects can be used to store data per browser storage. Both objects expose similar Apis and similar methods. 

LocalStorage

The localStorage property of the window object returns a Storage object which can be used to save and retrieve data from browser storage.

The localStorage has no expiration time unlike sessionStorage we will see below. localStorage is persisted permanently between browsing sessions even you close the browser. In “private browsing” session is cleared when the last private tab is closed.

The localStorage property contains these methods:

• localStorage.setItem(key, value).
• localStorage.getItem(key).
• localStorage.removeItem(key).
• localStorage.clear().
• localStorage.length

Setting items into localStorage:

localStorage.setItem('firstname', 'john');
localStorage.setItem('lastname', 'doe');

You can view the localStorage in any browser by inspecting the devtools, for example in chrome you right click and click inspect and choose the application tab like so:

Retrieving items from localStorage:

const firstname = localStorage.getItem('firstname');

console.log(firstname);

// output
john

Checking the length of localStorage:

console.log(localStorage.length);

// output
2

Removing specific item by key:

localStorage.removeItem('lastname');

console.log(localStorage.getItem('lastname'));   // null
console.log(localStorage.length);                // 1

Removing all localStorage items:

localStorage.clear();

console.log(localStorage.length);    // 0

SessionStorage

sessionStorage is similar to localStorage returns a Storage object which can be used to save and retrieve data from browser storage.

The difference from the localStorage as we mentioned above, the sessionStorage is expired when the page session ends. This is typical place to store data that is persisted for one session only.

This how Session Storage work:

• When the user open a new tab a unique page session gets created and assigned to that particular tab.
• A page session lasts as long as the tab is open, and survives over page reloads and restores.
• Opening a page in a new tab or window creates a new session with the value of the top-level browsing context.
• Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
• Closing a tab/window ends the session and clears objects in sessionStorage.

The sessionStorage property contains similar methods like localStorage:

• sessionStorage.setItem(key, value).
• sessionStorage.getItem(key).
• sessionStorage.removeItem(key).
• sessionStorage.clear().
• sessionStorage.length

When To Use Local Storage

The typical scenario to use localStorage is when you need to store data permanently without thinking about the expiration time. An example for this is to store the current language of the website so that each time the user visits the website he redirected to that language.

When To Use Session Storage

If the expiration time of the stored data matters you can think of using the sessionStorage. An example of this which i have done on one of my projects is to show an advertising pop everytime the user visits the website. However sessionStorage doesn’t allow you to control the expiration time, in this case think about using cookies. 

You can use sessionStorage and localStorage altogether on the same website as your per needs.

When You Can not Use Session and Local Storage

localStorage and sessionStorage are browser Apis so you can use them on browser environments only. However in single page applications which uses SSR (Server Side Rendering) to store data between client and server such as Nextjs or Nuxtjs frameworks,  localStorage and sessionStorage won’t work. Instead you have to revert back to HTTP cookies. As Http cookies can be read from both the client and the server.