Being a front-end developer one of the common things that we wanted is to store and share data in the client browser, And most of us really rely on local storage. So what is localStorage..?
according to MDN:
The
localStorage
provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. data stored inlocalStorage
has no expiration time. Data in alocalStorage
object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.
So the data stored in localStorage
is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different localStorage
object from the same site accessed with HTTPS (e.g., https://example.com).
The keys and the values are always in the UTF-16 DOMString
format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.
So what are localStorage
disadvantages..?
- data stored in
localStorage
has no expiration time -
localStorage
will be available for any tab or window in the browser, - Have to constantly keep back up of data to prevent loss
- The user is completely responsible for the safety of the data
- Takes up more storage space if you store locally
Switching to session storage
Window.sessionStorage
is a better alternative option for localStorage
.
A page session lasts only as long as the browser tab is open, and it will survive over page reloads and restores. But opening a page in a new tab or window will create a new session. And we have a storage limit is larger than a cookie (at most 5MB)
Using Session storage
setting data
We can store data using setItem
method.
syntax :
sessionStorage.setItem('key', 'Value');
the above code will add the given key-value pair to session storage.
EG:
so the session storage now has data with key MyCat
Getting data
We can get data using the getItem
method.
syntax :
sessionStorage.getItem("key")
the above code will return data of that key from session storage.
EG:
Removing Data
We can remove data using removeItem
or clear
method.
syntax :
sessionStorage.removeItem("key")
sessionStorage.clear()
removeItem
will remove a specific key from session storage, whereas the clear
method will clean up the entire session storage
Top comments (3)
Although, I learned with session storage, I mostly use the cache API and IndexedDB (sometimes through pouchdb). Mainly because that's how docs on PWA told me to do so, I honestly didn't really compare the benefits of each.
Even i do the same. But most of the time i just go with
session storage
.Using one over the other depends on the scenario. If data is not critical , I prefer using localStorage as it reduces number of server requests.