How jQuery stores data related to an element ?

Last Updated : 18 Jul, 2022

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

In this article, we see how to store data related to an HTML element using jQuery, along with understanding its implementation through the examples.

This task can be accomplished with the help of data() method in jQuery. The data() is an inbuilt method that store the arbitrary data related to the matching elements or the value for the named data will be returned, which contains the first element in the set of matching elements.

Syntax:

$(selector).data(element);

Approach: Here, the jQuery stores the data to an HTML div element. Two buttons are available, one of which attaches data to the div element with the “divID” id. Another button retrieves data showing it in another HTML div namely with id “resultID”.

Example 1: The following example illustrates the jQuery storing the name of the data & then retrieving it for the selected element.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("#btnID1").click(function() {
                $("#divID").data("data1", "value1");
                $("#divID").show().html("Data is attached to div<br>");
            });
            $("#btnID2").click(function() {
                var resultData = $("#divID").data("data1");
                $("#resultID").show().html(
                  "<b>You retrieved value is:</b> " 
                  + resultData);
            });
        });
    </script>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>
        jQuery storing of Data related to an element
    </h3><br/>
    <div id="divID"> </div>
    <button id="btnID1">
        Attach data to div element
    </button>
    <button id="btnID2">
        Retrieve the attached data
    </button><br/>
    <div id="resultID"></div>
</body>
</html>

Output:

Example 2: The following example demonstrates the jQuery storing of data to an HTML div element using a JavaScript switch statement. The different buttons are available to get or set the values to HTML div element using data() method.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style>
        div,
        button,
        p {
            margin: 5px;
        }
         
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1> 
    <h3>
        jQuery storing of Data related to an element
    </h3>
    <div id="resultID"></div>
    <button>
        Get "mydata" from the HTML div
    </button>
    <button>
        Set "mydata" to "helloWorld" value
    </button>
    <br>
    <button>
        Set "mydata" to number 75
    </button>
     
<p>
        <b>The "mydata" value is:</b> 
       <span></span>
    </p>
 
 
    <script>
        $("button").click(function() {
            var value;
            switch($("button").index(this)) {
                case 0:
                    value = $("#resultID").data("mydata");
                    break;
                case 1:
                    $("#resultID").data("mydata", "helloWorld");
                    value = "Stored";
                    break;
                case 2:
                    $("div").data("blah", 75);
                    value = "Num stored";
                    break;
            }
            $("span").text("" + value);
        });
    </script>
</body>
</html>