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?
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:
That’s it for today. When using Local Storage, remember that it is certainly not a place to store sensitive data!