What is local storage in JavaScript?

Sometimes, you may need to work on web applications without using a backend database. Worry less, local storage is available for you.

The localStorage property allows you to retrieve and store data in a web browser. With localStorage, data stored will remain in the browser even after the browser tab is closed or refreshed. Two types of storage can store data locally in a web browser; sessionStorage and localStorage. In this article, I will focus on how to use localStorage in JavaScript.

What is local storage?

Local storage enables browsers to store key-value pairs. These key-value pairs can be regarded as objects that remain intact when the page refreshes or the browser restarts. However, you should note that you must stringify an object before storing it. Using localStorage to store insensitive data is best because third parties can easily access it. Another limitation of using localStorage is that most modern web browsers only offer 5MB of storage capacity.

How does local storage work?

Years ago, cookies were used to store data on the browser. Unlike cookies, localStorage doesn't send data to the server in every request. JavaScript handles everything and bounds the storage to the origin (protocol or domain). To use local storage in a web application, you can access it through the localStorage() property and methods available. These methods include: setItem(), getItem(), removeItem(), clear(), and key().

Let's see how these methods work!

Local storage methods

1. key()

This method helps to loop through the items stored in local storage.

let notes = localStorage.key(index);

You can use the key() method to get a given position. It accepts the index as a parameter and returns the corresponding value.

2. setItem()

It stores the key and value pair in the local storage object.

localStorage.setItem('note', 'mynote')

note refers to the key while the mynote is the value. Remember that you have to convert objects to strings before storing them.

const note = {
              title: "Happy",
              details: "Live life to the fullest."
}
localStorage.setItem('note', JSON.stringify(note));

3. getItem()

If you want to retrieve items from the local storage. It uses the key value to extract the required item from the localStorage.

localStorage.getItem('note');

The method returns the values in the note as a string.

"{title: "Happy", details: "Live life to the fullest."}"

You need to convert it to an object using JSON.parse()

JSON.parse(localStorage.getItem('note'));

4. removeItem()

A key value can be removed in the local storage with the removeItem() method. You must pass the key as a parameter; the method deletes the key-value pair.

localStorage.removeItem('title');

5. clear()

You can clear all items in the local storage with the clear method.

localStorage.clear();

Local storage browser compatibility

Several browsers support local storage. Some common ones with their respective versions are:

Opera - 11.5
Internet Explorer - 8.0
Edge - 12
Safari - 4
Google Chrome
Firefox - 3.5

You can check your browser compatibility before working with local storage. This is possible with the code below.

if (typeof(Storage) !== "undefined") 
{ 
    console.log("localStorage is available."); 
} 
else 
{ 
    console.log("localStorage is not supported by current browser."); 
}

Conclusion

The local storage property is significantly used to save data locally. If you are creating web applications that require saving user preferences, you can consider using it (except for sensitive data). It is simple to use and set up in vanilla JavaScript. I hope this article helped you with your web development journey. Thanks for reading! Follow me on this platform to read more insightful content.

How To Use localStorage To Store Data In JavaScript

Table of contents