This content originally appeared on DEV Community and was authored by Ellaine Tolentino
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:
| Method | Function |
|---|---|
setItem(key, value). |
Sets the key-value pair you want to store. |
removeItem(name) |
remove the name-value pair identified by name. |
getItem(name) |
get the value for a given name. |
key(index) |
get the name of the value in the given numeric position. |
clear() |
remove all values. |
length |
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.
An example of that is this:
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.
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!
This content originally appeared on DEV Community and was authored by Ellaine Tolentino
Ellaine Tolentino | Sciencx (2021-04-22T00:48:53+00:00) What is localStorage?. Retrieved from https://www.scien.cx/2021/04/22/what-is-localstorage/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.