Open In App
Related Articles

How to store data in the DOM ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will learn to store data to DOM elements.

If we want to save some data in an HTML tag, we can use the jQuery .data() method to store data which can also be retrieved later by using the same method.

Syntax:

$(selector).data(name)
Attribute values:
  • name: It defines the name of the data to be stored and is an optional parameter.

Note: If no name is specified, the .data() method returns all stored data for that particular element. 

HTML code: Let us look at an example to understand how to store data to DOM using .data() method.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <script src=
    </script>
     
</head>
  
<body style="text-align:center;" id="body">
    <h2 style="color:green">GeeksforGeeks</h2>
    <p><b>Enter the value to store:</b></p>
  
    <input type="text" id="data" name="input"><br/>
    <br/>
    <button id="b1">Store entered data</button>
    <button id="b2">View data </button><br/><br/>
    <div id="display"></div>
    
    <script>
    $(document).ready(function(){
     // We are setting user data to data tag 
         $("#b1").click(function(){
         var d=($("#data").val());
         $("#data").data("userdata",d);
      });
      //Displaying data after accessing from data tag 
      $("#b2").click(function(){
         $("#display").html($("#data").data("userdata")) ;
          
      });
    });
   </script>
</body>
    
</html>

                    

Output: 

data() method



Last Updated : 18 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads