En este artículo, aprenderemos a almacenar datos en elementos DOM .
Si queremos guardar algunos datos en una etiqueta HTML, podemos usar el método jQuery .data() para almacenar datos que también se pueden recuperar más tarde usando el mismo método.
Sintaxis:
$(selector).data(name)
Valores de atributos:
- name: Define el nombre de los datos a almacenar y es un parámetro opcional.
Nota: si no se especifica ningún nombre, el método .data() devuelve todos los datos almacenados para ese elemento en particular.
Código HTML: Veamos un ejemplo para entender cómo almacenar datos en DOM usando el método .data() .
HTML
<!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>
Producción:
método de datos()