With modern browsers, at least 2 kinds of client-side storage for small amounts of text data are provided.
One is local storage and the other is session storage.
They both have different uses in our JavaScript web apps.
In this article, we’ll look at the difference between them.
And we also look at how to use them in our JavaScript code.
Differences Between Local Storage and Session Storage
Local storage and session storage serve different purposes.
Local storage lets us store data until they’re deleted.
They stay with the domain.
And changes are available for all current and future visits to the site.
Session storage changes are only available per tab.
Changes that are made are only available in that tab until it’s close.
Once it’s closed the stored data is deleted.
Using Local Storage
To use local storage, we can call methods in the localStorage method to get and set data.
To add data, we call the localStorage.setItem method, which takes a string key and the corresponding value respectively.
Both the key and value should be strings.
If they aren’t strings, then they’ll be converted into strings.
To get data, we call localStorage.getItem with the key.
It returns the value corresponding to the given key.
And to clear all local storage data, we call localStorage.clear .
To remove a local storage item with the given key, we call localStorage.removeItem .
For instance, we can use it by writing:
localStorage.setItem('foo', 'bar')
console.log(localStorage.getItem('foo'))
'foo' is the key and 'bar' is the corresponding value.
We can remove an item with removeItem by writing:
localStorage.setItem('foo', 'bar')
localStorage.removeItem('foo')
console.log(localStorage.getItem('foo'))
getItem should return null since we removed the entry with key 'foo' .
And we can call clear to clear all local storage entries:
localStorage.setItem('foo', 'bar')
localStorage.clear()
Using Session Storage
To manipulate session storage, we just remove localStorage with sessionStorage .
So we can write:
sessionStorage.setItem('foo', 'bar')
console.log(sessionStorage.getItem('foo'))
to add an item into session storage with setItem
'foo' is the key and 'bar' is the corresponding value.
We can remove an item with removeItem by writing:
sessionStorage.setItem('foo', 'bar')
sessionStorage.removeItem('foo')
console.log(sessionStorage.getItem('foo'))
getItem should return null since we removed the entry with key 'foo' .
And we can call clear to clear all session storage entries:
sessionStorage.setItem('foo', 'bar')
sessionStorage.clear()
Conclusion
We can use local storage or session storage to store small amounts of text data.
Local storage data are saved until they’re deleted and are available throughout the site.
Session storage data are only available in the current tab and are deleted once the tab is closed.
