How to store data in the browser using localStorage - Web API

There are different ways to store data in the browser. Here we will try to know how to store data in the browser using localStorage.

Intro

Local Storage is a Web API that allows us to store data in browsers. It stores data as key-value pairs. localStorage data is specific to the URL. If you add data corresponding to the URL yourdomain.com, you can’t access or see the data in yourdomain.com/test.

Local Storage data remains in the browser, even if you close the browser. But this will expire as soon as you close the window if you open it in private or incognito mode.

Things to remember about localStorage:

localStorage allows you to store only strings.
Here the data is not automatically deleted. We have to delete it.
Don’t store any confidential data in localStorage.

Let’s see the methods of this web API with code examples.

Add/Create

Storing new data is so simple. Not only storing new data, but all the operations of localStorage are also simple.
To add, we have to use the method setItem(). It takes two parameters, the first one is the key name, and the second one is the value. Ex: localStorage.setItem(key, value);.

We can store more than one key-value pair.

// Example
localStorage.setItem('name', 'JavaScript');
localStorage.setItem('text', 'Hello World!');

You can check if it’s stored in the browser if you want. To see it from the browser, open your browser’s developer tools and click on the application tab. And there, you will see the Local Storage menu on the left. Developer Tools > Application > Local Storage.

Access

Now we know how to store data. Suppose we want to access that data. To access that stored data, we can use the method getItem(). This method takes an argument that is the name of the key. Let’s see an example.

localStorage.setItem('name', 'JavaScript');

const val = localStorage.getItem('name');
console.log(val); // JavaScript

Updating data is similar. Just use the existing key name and replace the previous value with the new one. The method is the same as the previous one.

localStorage.setItem('name', 'Jhon');

localStorage.setItem('name', 'Doe');
const val = localStorage.getItem('name');

console.log(val); // Doe

Remove

To remove specific key-value pair, use the method removeItem(). It takes a parameter, the name of the key.

localStorage.setItem('text', 'Programming is Awesome!');

const val = localStorage.getItem('text');
console.log(val); // Programming is Awesome!

localStorage.removeItem('text'); 
console.log(localStorage.getItem('text')); // null

Clear

If you don’t want to delete data by key-value one by one, then you can use this method. By this method, we can delete all the data at once.

localStorage.setItem('username', 'test');
localStorage.setItem('age', '99')

localStorage.clear();

How can we store Array/Objects?

As we already know, we can only store strings using localStorage. But how can we store arrays/objects if we ever need them? To do that, we will need two JSON methods.

JSON.stringify();
JSON.parse();

stringify() – Stringify converts any value to a JSON string.
parse() – This method converts JSON strings to JavaScript objects. In simple, it brings the value back to the state before Stringify.

Let’s try to create an object and store that object in the local store.

const user = {
    username: 'jhondoe',
    first_name: 'Jhon',
    last_name: 'Doe',
    gender: 'Male',
    age: 99,
    website: 'https://example.com',
    localtion: 'Texas, USA'
}

const user_json_str = JSON.stringify(user);
console.log(user_json_str); // '{"username":"jhondoe","first_name":"Jhon","last_name":"Doe","gender":"Male","age":99,"website":"https://example.com","localtion":"Texas, USA"}'
localStorage.setItem('user', user_json_str);

// Access data from the local storage
const res = localStorage.getItem('user');
const user_obj = JSON.parse(res);
console.log(user_obj);

Now, you can try to store an array by yourself. The method is similar to the previous example.

Final Words

So this is the minimal overview of localStorage. I tried to cover almost everything. This web API is helpful when need to store data in the user’s browser for future use.

I hope I have been able to give you a good idea about this web API. If this blog helps you, that means a lot to me.

Happy Learning 🙂
Happy Coding 🙂