How to Save Data in Local Storage in JavaScript?

How to Save Data in Local Storage in JavaScript?

Last Updated : 14 Oct, 2024

LocalStorage is a client-side web storage mechanism provided by JavaScript, which allows developers to store key-value pairs directly in the user's browser. Unlike cookies, LocalStorage is persistent—data stored remains even after the browser is closed and reopened, making it ideal for retaining user preferences, session data, or any other information that needs to be accessible across page reloads.

How to Use LocalStorage in JavaScript

We will use the localStorage object in JavaScript to save user input data locally in the browser. This simple approach allows data to persist even after the user navigates away from the page or closes the browser.

Save Data: We'll capture user input and store it locally using localStorage.setItem().
Retrieve Data: We’ll retrieve the stored data using localStorage.getItem() and display it on the webpage.

Syntax:

// Storing data in local storage
localStorage.setItem('name', 'anyName');

// Retrieving data from local storage
const username = localStorage.getItem('name');
console.log(username);

Example: Saving Data Using LocalStorage

Let’s look at a practical example where user input is saved using LocalStorage and displayed when retrieved.

HTML

<!DOCTYPE html>

<head>
    <title>Example 1</title>
</head>

<body>
    <div>
        <h1 
            style="color: green;">GeeksforGeeks</h1>
        <h3>Using localStorage Object</h3>
        <label 
            for="dataInput">Enter Data:</label>
        <input
            type="text"
            id="dataInput">
        <button 
            onclick="saveData()">Save Data</button>
    </div>
    <div>
        <h2>Saved Data:</h2>
        <div id="savedData"></div>
    </div>
    <script>
        function saveData() {
            const data = document
                .getElementById('dataInput')
                .value;
            localStorage
                .setItem('userData', data);
            displayData();
        }
        function displayData() {
            const savedData = localStorage
                .getItem('userData');
            document
                .getElementById('savedData')
                .innerText = savedData;
        }
        displayData();
    </script>
</body>

</html>

Output:

How to Save Data in Local Storage in JavaScript?

G

gauravgandal

Improve

Article Tags :

Similar Reads

How to Store an Object sent by a Function in JavaScript ?

When a function in JavaScript returns an object, there are several ways to store this returned object for later use. These objects can be stored in variables, array elements, or properties of other objects. Essentially, any data structure capable of holding values can store the returned object. Tabl

Build a Site Bookmark App With JavaScript by using Local Storage

Building a Site Bookmark App with JavaScript involves creating a web app that lets users save, view, and manage their favorite websites. This is achieved using HTML for structure, CSS for styling, and JavaScript for functionality, including adding, displaying, and deleting bookmarks.Local Storage is

JavaScript localStorage

JavaScript localStorage is a feature that lets you store data in your browser using key-value pairs. The data stays saved even after you close the browser, so it can be used again when you open it later. This helps keep track of things like user preferences or state across different sessions. Syntax

How to read a local text file using JavaScript?

JavaScript can read local files using the File API, which is supported by most modern browsers. The File API allows JavaScript to read the contents of files chosen by the user, typically through an HTML file input element.The File object represents a file (like a text file or image) selected by the

How to Save Data in Session and Local Storage [Full Guide]

When working with web applications, session storage and local storage are essential tools for storing data on the client side. These storage mechanisms allow you to persist user data between page reloads or sessions, helping improve user experience and performance. Session storage is useful for temp