How to serialize a Map 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 serialize a Map in JavaScript ?

G

gauravgandal

Improve

Article Tags :

Similar Reads

How to Save Data in Local Storage in JavaScript ?

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 use

How to serialize a Map in JavaScript ?

In this article, we will discuss, the serialization of maps in JavaScript. Serialization is the conversion of an object or a data structure to another format that is easily transferrable on the network. In JavaScript, the format suitable for transferring is JSON string. So, we usually call the JSON.

How to Store an Object Inside an Array in JavaScript ?

Storing an object inside an array in JavScript involves placing the object as an element within the array. The array becomes a collection of objects, allowing for convenient organization and manipulation of multiple data structures in a single container. Following are the approaches through which it

How to Store a JavaScript Fnction in JSON?

In JavaScript, we can store JavaScript functions in JSON objects, allowing us to serialize and store executable code alongside data. we will explore three approaches to store a JavaScript function in JSON. These are the following approaches: Table of Content Using JSON.stringify()Using a Custom toJS

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

How to Serialize JSON in JavaScript ?

JSON (JavaScript Object Notation) serialization is a fundamental concept in JavaScript, allowing the conversion of JavaScript objects into strings that can be easily transmitted over a network or stored in a file. We will explore how to serialize JSON in JavaScript using JSON.stringify(). Approach I

How to Get the Length of a String in Bytes in JavaScript ?

In JavaScript, determining the length of a string in characters is straightforward using the length property. However, in many cases, particularly when dealing with file sizes, network protocols, or database storage, you might need to know the length of a string in bytes. This is because characters

How to declare namespace in JavaScript ?

The coding standard of assigning scope to identifiers (names of types, functions, variables, and so on) to avoid conflicts between them is known as a namespace. It is a framework for a collection of identifiers, functions, and methods. It gives its contents a sense of direction so that they are easi

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 i

How to reload page only once in JavaScript ?

Reloading a webpage once using JavaScript ensures that users see the most up-to-date content on their initial visit. This technique leverages session storage to track if the page has been reloaded, enhancing user experience by preventing unnecessary reloads and ensuring content freshness. Using Loca