LOCAL STORAGE WITH VANILLA JAVASCRIPT
Have you been using the browser API ‘window.location.href' to transfer data across different pages? or is it the module that you are always applying? Well, is cool but have you ever think of updating existing data? I must tell you there is an easy way to have access and update your data from every page you wish.
In this course, you will understand how you will be able to make your data accessible from every file with javascript.
Meanwhile, let us have an understanding of what local storage is;
Local storage is a browser API for data storage and persistence. You may say it is a warehouse for data storage, though, if you are dealing with a very huge amount of data you may have to use any of the cloud storage to hold the data.
Data saved in the local storage remain persistent even after leaving the page, as such, it has no expiry date. It is very good at data cache when building/testing a web/mobile application. On mobile, it can hold up to 5mb of storage, and on the desktop, it can hold up to 50mb of storage respectively. Local storage data are saved in key/value pairs.
Let us dive into the ways this API can be used. The web API; local storage have methods in which it could be accessed. The following are methods that are applied in using the local storage API.
window.localStorage.setItem();window.localStorage.getItem();window.localStorage.removeItem();window.localStorage.clear();window.localStorage.key();
These methods will be applied using a string and an object — arrays and other methods can be used too.
Setting Data To The Local Storage
To set data to the local storage, your value can be a variable if declared one, if not it can as well be a plain string. In the following, let us add data to the local storage:
//adding value as a variable
let fullName = "chime chibuike princewill";
window.localStorage.setItem("key", fullName);The full name has been successfully saved to the local storage, the setItem method has two parameters, the first parameter holds the key to the data and the second parameter holds the value which is to be set to the local storage. Let’s take a look at the local storage view in the following:
//adding value as a string
window.localStorage.setItem("key", "chime chibuike princewill" );Instead of setting the value as a variable, it was passed as a string direct.
Getting Data From The Local Storage
Previously, we set the full name variable to the local storage. Unlike the setItem method that takes two parameters, the getItem method takes a parameter. Let us see how this method is been used in the following:
let data = window.localStorage.getItem("key");console.log(data);//chime chibuike princewill
Here, remember when I said above, data is saved/set in key and value pairs, when getting data from the local storage, the key to the full name that was set will be used to get the value whenever we want to get the value of what was set to the local storage.
Removing Data From The Local storage
The removal of data from the local storage is done with the use of the data key that was set to the local storage. Hereinafter, is how we can remove data from the local storage;
window.localStorage.removeItem('key')We removed the key/value pair with the given key from the list associated with the object If a key/value pair with the given key exists. In our case, the given key exists, so the data will be removed.
Currently, the local storage is now empty.
Clearing The Local Storage Data
Just like the name implies, it clears/removes all the data saved in the local storage. It is used like so;
window.localStorage.clear()We have shed the list associated with the object of all key/value pairs, if there are any. This method does not take any parameter; because it calls for the overall wipe of the local storage data.
Getting Data From Local Storage Using Index
This method gets the data by the index of the data in the local storage if the index exists. When a string is added as a parameter, it returns the first object of the local storage. Infra is how to achieve this;
//getting value by the nth key. window.localStorage.key(0)//with the previous data we had, it will print (key) as its result
This returns the name of the nth key in the list, or null if the number is greater than or equal to the number of key/value pairs in the object.
Now that we have seen how to Set, Get, Remove, and Clear data in the local storage, let us now see how Object and array are set to the local storage below;
//to set an object to the local storage
const object = {firstName: "chibuike",lastName: "princewill",skills: "software development",email: "princewillchime43@gmail.com",phone: `+234${8169543479}`};localStorage.setItem("profile", JSON.stringify(object));
Let us see how the local storage looks like in the following:
Here the object that was created was set using JSON.stringify() method. This is because data saved to the local storage must be a string, so the object was converted to a JavaScript Object Notation( JSON ) using JSON.stringify() method.
Note: Array will also be set to the local storage just the same way that was used on the screenshot above.
Let us now see how Object/Array can be retrieved from the local storage
let result = JSON.parse(localStorage.getItem("profile"));console.log(result);
Above lies the way to retrieve our object that was sent to the local storage.
The JSON.parse() method is a method that is used to convert a JSON string into a pure object.
It is a function that transforms the results. This function is called for each member of the object. If a member contains nested objects, the nested objects are transformed before the parent object is. Let us see the console view of the data we have retrieved from the local storage in the following:
This brings us to the end of this article. If this course was helpful to you, please hit the 👏 icon, share and recommend.
You can also well follow me up in Medium. Twitter and Linkedin for more of my amazing articles.
