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 using it to persist data for JWT authentication and that is all I knew of it.
Little did I know there is more usage of localStorage than tokens!
Let's take a quick look together and learn a little bit of what is localStorage?
||Sets the key-value pair you want to store.|
||remove the name-value pair identified by name.|
||get the value for a given name.|
||get the name of the value in the given numeric position.|
||remove all values.|
||to get the number of key-value pairs|
The localStorage can store only strings for its values. It automatically converts non-string data into a string before storing it.
When you retrieve data from a Storage object, you’ll always get the data as a string. Same with sessionStorage and Cookies. You can also store objects in the localStorage. We would just have to use
JSON.stringify() to store the object.
Some say that most modern web browsers allow you to store up to 5MB, while others say it's close to unlimited.
When it comes to storing data, localStorage keeps it until the browser is closed or until you run the
I have also used localStorage in one of my React app projects to manage the theme of the page! Since storing the theme of the app didn't need any security requirement, I tried and stored values in there.
Part of the component that toggles the theme is an
onClick eventListener that triggers a switchTheme function that contains an if statement & it looks like this;
See that the main use of the localStorage is to really just store key-value pairs which can be used on many other things.
So that is it! I hope you had fun glancing through this blog about localStorage and hopefully helped you in some way in persisting data other than cookies or state.
Do you have any other experience of using localStorage in a different way? Let me know in the comments below! I would love to try them out!