What is localStorage?

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?

Methods:

The localStorage can store only strings for its values. It automatically converts non-string data into a string before storing it.

An example of that is this:

When you retrieve data from a Storage object, youll 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.

Example:

Like as you can see, once stored, the whole object turns into a string even when trying to get the data back. But this data can be converted back to an object by using JSON.parse().

Just like this;

Capacity & Usage

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 localStorage.clear() command.

On my previous project, I used localStorage.clear() when the user logs out of the web app and clears out any token stored in the browser.
Check it out here on our handleLogout function;

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!