Its time to learn javascript's localStorage !

Posted by Adarshreddy Adelli

Wednesday, April 8, 2020

One day while working with blobs, I thought my data should be stored right in the browser. The first thing that came into my mind is cookies, but I am not having any server to handle. Then I heard about javascript's localStorage, a web storage that is widely supported by major browsers out there would do the task.

Whenever we store the data using local storage the data will be persistent in nature even if you close the browser window. The data is stored as key-value strings and can be cleared by the user. localStorage uses map like interface.

localStorage takes two parameters a key and its value. setItem() is used to set value for a key.

localStorage.setItem('blogname', "gspace");

Now we use the getItem() to retrieve the data

console.log(localStorage.getItem('blogname'));

>gspace

In the same way .removeItem(); is used to remove an item stored in the web storage.
To clear all the items that are stored in the localStorage we use .clear() method which does not take any parameters.

localStorage.clear();

As these are javascript objects there is a simpler way to handle these methods.

localStorage.blogname='gspace' //setting Item

localStorage.blogname // getting Item

delete localStorage.blogname //removing Item 

Please note that this do not handle confidential information like a password as it is easily accessible on the console.  And there is a limitation on the size of usage which is set by the browser.  There is a lot to inspire from the internet, developers have been using localStorage to handle forms (refreshing wouldn't affect form-data), even some of them have created a commenting system based on localStorage. Now it's your turn to experiment.

Adarshreddy Adelli Wednesday, April 8, 2020 javascript web development