如何在DOM中存储数据

在这篇文章中，我们将学习如何将数据存储到DOM元素。

如果我们想在一个HTML标签中保存一些数据，我们可以使用jQuery .data()方法来存储数据，以后也可以通过同样的方法来检索。

语法:

$(selector).data(name)

属性:

name：它定义了要存储的数据的名称，是一个可选的参数。

注意：如果没有指定名称，.data()方法返回该特定元素的所有存储数据。

HTML代码：让我们看一个例子，了解如何使用.data()方法将数据存储到DOM。

<!DOCTYPE HTML>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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>

输出:

如何在DOM中存储数据？