- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to store data to DOM?
Storing data in the DOM means storing data in plain text format. For example, we store data in the state variable while using React or any other reactive framework. When the user updates the data in the input field, it stores updated data in the state variable.
So, we store data in the state variable before we submit the form. At the time of submitting the form, we use the values of the state variables.
In vanilla JavaScript, we can do the same, like storing data in plain text format, and whenever we require to submit the form, we can fetch data from DOM rather than getting it from the input fields.
Here, we will learn to store data in the DOM using JavaScript and Jquery both.
Use JavaScript to Store Data in the DOM
In JavaScript, we can create an object to store the data. We can store the data in the object in plain text format and fetch from the object whenever required.
Syntax
Users can follow the syntax below to store the data in the DOM using JavaScript.
let data_obj = {
prop1: "",
}
data_obj.prop1 = value;
In the above syntax, we created the data_obj object to store data, and we can update its value.
Example
In the example below, we have created the form containing the two input fields. Also, we have given names to every input field. Whenever users click the store data function, it invokes the storeInDOM() function, which fetches the input value and stores it in the object. Whenever users press the ‘get stored data’ button, it invokes the getFromDOM() function, which accesses the data from the data_obj object.
<html>
<body>
<h2>Using JavaScript to store data in DOM</h2>
<form>
<label for = "fname"> First name: </label> <br>
<input type = "text" id = "fname" name = "fname"> <br>
<label for = "lname"> Last name: </label> <br>
<input type = "text" id = "lname" name = "lname">
</form>
<button onclick = "storeInDOM()"> Store data </button>
<button onclick = "getFromDOM()"> get stored data </button>
<div id = "content"> </div>
<script>
let data_obj = {
fname: "",
lname: ""
}
function storeInDOM() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
data_obj.fname = fname;
data_obj.lname = lname;
}
function getFromDOM() {
document.getElementById("content").innerHTML = "The value of first name is - " + data_obj.fname + " <br> The value of the second name is - " + data_obj.lname;
}
</script>
</body>
</html>
In the output, users can see the stored data.
The jQuery contains the data API, which we can invoke using the data() method. We can store the data for a particular element. When we pass the two parameters to the data API, it stores the data for a particular element; Otherwise, it returns the data stored for a particular element.
Syntax
Users can follow the syntax below to store the data in the DOM using Jquery’s data() method.
$("CSS_identifier ").data("key_name", value);
A CSS identifier is used to select an element in the above syntax. The data() method takes the key as a first parameter and the respected value as a second parameter.
Example
The form contains the email and password input fields in the example below. Whenever the user presses the button to store data, we fetch the input’s value using Jquery and store it in the DOM for a particular element using the data() method. Here, $("#email").data("email", email) will access the input with id equal to email and store ‘email’ as a key and input value as a value of the ‘email’ key.
So, we can store key-value pairs by taking any element as a reference using the data() method, and also users need to take the same element as a reference while accessing the data.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Using jQuery to store data in DOM</h2>
<form>
<label for = "Email"> Email: </label> <br>
<input type = "email" id = "email" name = "email"> <br>
<label for = "password"> Password: </label> <br>
<input type = "text" id = "password" name = "password">
</form>
<button onclick = "storeInDOM()"> Store data </button>
<button onclick = "getFromDOM()"> Show stored data </button>
<div id = "content"> </div>
<script>
// storing data in DOM using jQuery's data() method
function storeInDOM() {
var email = $("#email").val();
var password = $("#password").val();
$("#email").data("email", email);
$("#password").data("password", password);
}
// getting data from DOM using jQuery's data() method
function getFromDOM() {
var email = $("#email").data("email");
var password = $("#password").data("password");
$("#content").html("Email: " + email + " Password: " + password);
}
</script>
</body>
</html>
Users learned to store data in the DOM. However, storing data in the DOM is a bad practice as it is temporary. Users can use the local or session storage of the browser to store the data, which also has straightforward syntax.
In JQuery, users can store the data for a particular element using the data API. In JavaScript, users need to store all data in single or multiple objects.
711 Views
