The storage API is convenient for us developers to store data on the client-side. Previously, cookies were used for this purpose which had its own drawbacks. Compared to cookies, Storage API is more secure and allows us to store large amounts of data locally on the browser.
The data is stored in key-value pairs of type String. The storage API provides us with two options for storing the data:
Session Storage
Local Storage
You can view your local and session storage from the Dev Tools under the Application Tab as shown below:
Session Storage
The data stored in session storage is not long-lasting. It is there as long as the browser or a tab is open, including page reloads and restores. On closing the browser or a tab, the data in session storage is cleared. It has a maximum storage capacity of 5MB.
Code example:
//Saving Data in session storage
sessionStorage.setItem('key', 'value');
//Getting data from session storage
const value = sessionStorage.getItem('key');
//Removing data from session storage
sessionStorage.removeItem('key');
//Removing all stored data in session storage
sessionStorage.clear();
Local Storage
On the other hand, data in local storage can be persisted for a longer period of time. It is long-lasting and is still present inside the browser even if the browser is closed. Data does not have an expiry. We can clear the local storage data using Javascript or via clearing the browser cache. Compared to session storage, local storage has a much more storage capacity.
Code example:
//Saving Data in local storage
localStorage.setItem('key', 'value');
//Getting data from local storage
const value = localStorage.getItem('key');
//Removing data from local storage
localStorage.removeItem('key');
//Removing all stored data in local storage
localStorage.clear();
Same Origin Policy
Storage API follows the same-origin policy. An origin is defined by three things:
The protocol used i.e. HTTP, HTTPS.
The host or the domain name i.e. google.com
The port where the web app is hosted.
So URLs with the same protocol, host, and port number(if specified) have the same origin.
Storage API for security reasons follows the same-origin policy. Data defined in a particular origin is accessible and can be manipulated only in the origin where it was defined. Consider, the origin example.com, and let's assume some data is defined in the local or session storage of the origin.
If I were to access this data from the URLs example.com/blogs or example.com/users, I will be able to access it because of the origin of both URLs is the same. But, for URLs **example.com:5656 **or example2.com, we will not be able to access data in local or session storage because the value of origin has changed. The first URL has a different port number of 5656 while the second URL has a different host value of **example2.com **
Storing Objects in the Storage API
As mentioned above, the storage API stores data as key-value pairs of type String. Whatever value we’re trying to store in the local or session storage is converted to a String by the setItem method of local and session storage.
Lets store an object in the local storage as follows:
As you can see, we have a problem here. setItem under the hood converts the object obj to a String via String(obj) which returns [object Object] , the value which is being stored in the local storage, as shown in the picture above. This is not what we want. We want to store the actual values present inside the object.
Turns out, there is a way. Using JSON.stringify() , we can convert our Javascript object to a JSON String. This String can then be stored in the local or session storage, as shown below:
Now, we are capable of storing objects inside the local or session storage. But there is one problem though. When we need to access the value of the object, we’re given back a String by the local storage’s getItem method.
To fix this issue and convert this String back to an object, we can use JSON.parse() as follows:
Now we’re getting back the same object we’ve stored in the local storage. And our problems related to storing and retrieving objects from the local or session storage are resolved.
Thanks for reading the post. I hope you found it useful. :)
Let’s connect: