When creating a web application, there will be moments when you want to store data individually on a user’s browser but without allowing the server (back-end) to access it.
That’s why if you read this blog post till the end, you are going to discover exactly how to use the Local Storage API to it’s fullest potential.
A while ago, I was working on a personal web application project that used normal HTML, CSS, and JavaScript on the front end. And PHP on the back end. I don’t remember exactly what I was creating anymore, but it required heavy use of saving user input data.
At the time I thought it was the best idea to use a MySQL database to store all the data, so I created the corresponding tables, wrote the queries, and started testing the application. Everything worked fine but I quickly discovered the data I was saving, was pretty useless for my database because all I used it for was to show it on the screen of the client.
So I started to search for an alternative and I came across a web page called javascript.info and which listed a special page referencing the Local Storage API.
The Local Storage API, as the name suggests, allows developers to store individual data on the client’s browser. So that only that specific client, can access that piece of data. Even if the user closes the browser or restarts his/her entire computer, the data will still persist.
Once I read the page, my ADHD brain got super hyped and I immediately started to code it into my web application, tested it, and saw that it worked amazingly.
So now, let’s take a quick look at the strategy of what you can do with the Local Storage API
- Adding data to the storage
- Retrieving data from the storage
- Removing data from the storage
Adding data to the storage
The first part of course is adding data to the storage so let’s do that now.
Adding data is done by a method called ‘setItem’. It takes both a key and value.
localStorage.setItem("country", "The Netherlands");Once added, the data will now stay persistent even if we would close our browser or restart our entire computer.
Retrieving data from the storage
In the example above, I mentioned that we add data by using a key and a value. The reason for this is that once we want to retrieve a specific value, we use its designated key to retrieve it.
const country = localStorage.getItem("country");
console.log(country); // This should print out "The Netherlands"Now we aren’t entirely dependent on using the ‘getItem’ method. We can also access the key by accessing it as an object.
const country = localStorage.country; console.log(country); // This should print out "The Netherlands"
Pretty neat ha?
Removing data from the storage
Obviously, a data storage is is not complete without being able to remove data.
localStorage.removeItem("country");Just like with retrieving the data, we can also remove it by using object like access.
delete localStorage.country;
Note
Both the key and value can only be of the string data type. This means that if you add a number, it will automatically be converted to a string.
And in the case that you want to store a list, object, or table. It would be best if you converted it to JSON before adding it to the storage. You do that as follows…
const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
localStorage.setItem("numbers", JSON.stringify(numbers));
So that’s it for this post, I hope you learned something from it and that it was clear enough for you to understand.
Feel free to leave a comment behind telling how useful it was for you, or maybe you even have some extra information that you would like to share.
Don’t forget, your dream career is just one step away!
Michiel Out!
Oh and btw, I’m currently opening 5 FREE spots in my brand new coaching program where I take complete beginners and turn them into coding beasts. So if you want to claim that exclusive spot, click the link down below.
