Client-side Web Storage APIs

As a developer, we all know that making a request from the server for every data will take time, and also it will be costly. To overcome this web browsers provide an API to store the user-specific data in the browser. Let's see about the client side storage APIs provided by the browsers in this blog

What is Client-side Web Storage?

Clent-side Web storage is nothing but the storage provided by the web browsers to store the user data in browsers. Client-side web storage follows the same origin policy to store the user data.

What Is the same origin policy?

The same origin policy is a security mechanism for which the site should have the same Protocol, Host, and Port to obey these rules. Let's see some examples to understand the same origin policy.

Let's take https://example.com to understand the same origin policy

• https://example.com/home.html - obeys the same origin policy since only the path changes.
• http://example.com - Fails the same origin policy since the protocol changes
• https://blog.example.com - Fails the same origin policy since the host changes
• https://example.com:8080- Fails the same origin policy since the port changes

Client-side web storage types

There are two types of Client-side web storage. They are

• Local Storage
• Session Storage

Let's see the similarities and differences between them.

Local Storage and Session Storage

Local storage and session storage have some similarities like

• Both are an object of the window object.
• Both are used to store the data.
• Both have the same type of methods to use.
• Both are browser independent (i.e data stored in Chrome can't be accessed by firefox)
• Both store the data in key-value pair.
• Both persist the data on page refresh.

Local Storage vs Session storage

In Local Storage,

• The data stored in local storage can be accessed on different tabs and even after closing the browser and reopening it.
• The data will be persisted until the user clears the data.

In Session Storage,

• The data stored in the session storage will be available only for a session. i.e The data is stored only till the tab/browser is closed
• If more no of tabs are opened for the same site, the new session storage is created for each tab.

How to use?

Both Local and Session storage have the same four methods to handle data. Let's see the example for each

To use Local Storage,

//For setting the data: 
localStorage.setItem('name', ' Manikandan')

//For getting the data:
localStorage.getItem('name')

//For removing the data:
localStorage.removeItem('name')

//For clearing all the data
localStorage.clear()

To use Session Storage,

//For setting the data: 
sessionStorage.setItem('name', ' Manikandan')

//For getting the data:
sessionStorage.getItem('name')

//For removing the data:
sessionStorage.removeItem('name')

//For clearing all the data
sessionStorage.clear()

Points to be noted

While storing string

When you try to store objects in web storage API, You will get the output as follows

//For setting the data: 
localStorage.setItem('name',{firstName:"Manikandan",lastName:"Subramaniam"})

//For getting the data:
localStorage.getItem('name')
// The output will be 
[object Object]

This happens because web storage APIs can only store the strings so it tries to convert the object into a string and store it as [object Object]. So while storing the object you have to stringify the object and while reading you have to parse it back to the object. Let's see the example for it.

//For setting the data: 
localStorage.setItem('name',JSON.stringify({firstName:"Manikandan",lastName:"Subramaniam"}))

//For getting the data:
JSON.parse(localStorage.getItem('name'))
// The output will be 
{
    "firstName": "Manikandan",
    "lastName": "Subramaniam"
}

Behaviour in incognito/private mode

In incognito/private mode the local storage data will be persisted only till the incognito window is closed. Session storage behaves the same when the tab closes the data is no longer persisted.

Summary

• We saw about Client-side web storage
• Same origin policy.
• Local storage and session storage.
• How to use and points to be noted.

Resources

• MDN - Web storage
• MDN - Same origin policy

I hope that this blog helped you in understanding Client-side Web storage APIs. Please share your feedback.