Local Storage synchronization – easy and powerful JS tool!

Today’s post is short, but it concerns a handy thing in the Front-End world – Local Storage! If you create applications in pure Javascript or one of the frameworks – in each of these cases, sooner or later, you will meet Local Storage. Okay, but what is it?

In short, it can be called a type of ‘warehouse’ that functions in the browser right next to cookies. What’s valuable – the data in Local Storage is available in the browser even after it is closed. So when the user returns to our website after some time – the data will continue to be updated.
We can store data in our ‘warehouse.’ What kind? For example, is the user logged or not, information on whether the user has accepted the website regulations, forms inputs, etc.
However, we must remember one important thing: data in Local Storage is stored in a string and key-value format.

We have access to Local Storage through five main methods, which are:

setItem() - Adds a key and value
getItem() - Get the value
removeItem() - Removes an item by key
clear() - clears all data from Local Storage
key(index) - method useful for iterating over the keys; we can get the value from the index key

Below you will find a short demo of how Local Storage works. To see this, open the link below in the two or more tabs and then click the button in one of them. After you make a click, switch to the second tab. You’ll notice that the button color on the second tab will change too! Isn’t that cool?

https://by3ol.csb.app/

And below, you can see what it looks like:

If you want to play with this demo yourself and maybe expand it a bit, here is the sandbox you can fork:

https://codesandbox.io/s/localstorage-demo-by3ol

That’s it for today. When using Local Storage, remember that it is certainly not a place to store sensitive data!

Leave a Reply

Your email address will not be published. Required fields are marked *

footer