DEV Community

Cover image for What is localStorage?

What is localStorage?

Ellaine Tolentino on April 22, 2021

I have encountered utilizing localStorage in one of my projects back when I was in coding bootcamp. I knew of its existence when we were taught of ...
Collapse
 
christiankozalla profile image
Christian Kozalla

This is an excellent post on how localStorage works and use it to store data beyond simple strings with JSON.parse and JSON.stringify ❤️

With this pattern you can actually use localStorage like an in-browser NoSQL Database

I've exploited this pattern to develop a small Vuejs App allowing a user to store meals and plan which meals to cook the next week

Anyways, I meant to write a post about localStorage, but I think if I write about that app, I will just link back to this post to cover localStorage 😄

Collapse
 
tolentinoel profile image
Ellaine Tolentino

Thank you! I still don’t know much besides the basic functionalities but I would love to know more! I’ll keep an eye if you get to post more about localStorage!

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Don't use LocalStorage anymore in apps, use IndexedDB

Collapse
 
christiankozalla profile image
Christian Kozalla

Okay, thanks for the tip.

What are the advantages of indexedDB over localStorage?

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic

It is not blocking javascript I recommend watching youtu.be/NNuTV-gjlZQ

Thread Thread
 
christiankozalla profile image
Christian Kozalla

Nice, so thank you for pointing out IndexedDB, since I wasn't familiar with it. One more advantage I have found is, that it can be used with Service Workers (or Web Workers in general) 👍

Collapse
 
sudarshansb143 profile image
sudarshan

But if you designed multiple games and stored the high scores of all in local storage then you call clear().

Then will it clear all high scores or only clear that specific games high score in which you call clear() ?

Collapse
 
joelnwalkley profile image
Joel N. Walkley

Thanks! Lots I didn't know here, especially about the limitations. One use I had was for users to see a live version of their edits to a profile before committing them. That way if they wanted to return to edits they could without updating the underlying data.

I've been wondering - what are the limitations of using localStorage as if it were global state in a React app (say for folks who want to avoid Redux)?

Collapse
 
tolentinoel profile image
Ellaine Tolentino

I tried to use locaStorage as a global state on a project, and it doesn’t automatically reflect the updates or changes in state unlike using Redux or there was somewhat of a delay since it needs to getItem then setItem and then return it.

Collapse
 
lelepg profile image
Letícia Pegoraro Garcez

Congratulations for a awesome post! I was just thinking about this these days, and your article came in perfect timing haha. I was working on a project these days and I was suffering on how to keep variables from a page to other, ans local storage was the way to go!

 
tolentinoel profile image
Ellaine Tolentino

Oh yes! this is a good thing to point out! Thank you!

Collapse
 
arvindpdmn profile image
Arvind Padmanabhan

A more general topic is Web Storage, that talks about local storage and session storage. Learn more at devopedia.org/web-storage

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

LocalStorage should not be used anymore in production apps, there is indexeddb.

Collapse
 
raddevus profile image
raddevus

Even if you're saving only one or two name value pair?

localStorage is extremely easy to use and is secure.

Now, you may want to say something like:
"Cookies should not be used anymore in production apps, there is localStorage."

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • Edited

Even then yes, LocalStorage is blocking the main thread, for this I recommend idb-keyval which lets you store small things like you mentioned in indexeddb also watch this video please to learn more youtu.be/NNuTV-gjlZQ

Collapse
 
zetareticoli profile image
Francesco Improta

Thank you, this post clearify what localStorage is.

Collapse
 
tolentinoel profile image
Ellaine Tolentino

Thank you!