Passing variables from one HTML page to another is a common task in web development. With JavaScript, you can easily pass variables between pages and create a more dynamic user experience. This tutorial will show you how to pass a variable from an HTML page to another using JavaScript. We’ll discuss the different ways of doing it, as well as provide examples of code that you can use in your own projects.
If you want then buy a good, reliable, secure web hosting service from here: click here
How to Pass Variables from an HTML Page to Another with JavaScript
In order to pass variables from one HTML page to another with JavaScript, it is necessary to first understand how to properly create and store the variables within the JavaScript code. For this example, we will be passing two variables, a string variable and a boolean variable, from one HTML page to another. We will be using the window.location object to accomplish this task.
We have one way to pass a variable from an HTML page to another using JavaScript and it is to use the browser’s localStorage object.
localStorage provides us a way to store key-value pairs in the user’s web browser, so that they push across different pages and sessions.
So, check the below example of how you could use localStorage to pass a variable between two HTML pages.
Previous JavaScript Articles
- JavaScript Variables
- JavaScript Operators
- Creating an Object in JavaScript
- Introduction to Asynchronous JavaScript
- Control Flow in JavaScript
- What is JavaScript Regex?
- JavaScript Events Example
- How to create a preloader in JavaScript?
- forEach method in JavaScript
- Sorting Arrays in JavaScript
- Linear Search in JavaScript
- Pagination in Vanilla JavaScript
- Transform Arrays with Map() Method
- How to change an element’s class with JavaScript
- Selection Sort in JavaScript
- Select All Text in Div with a Mouse Click in JavaScript
Let’s take a look at a full example that better demonstrates how the idea of using localStorage to pass values between two HTML pages.
Firstly, we need to a project setup with two HTML pages in the same folder:
Below the HTML/JavaScript code that need to placed in the page1.html file:
<!DOCTYPE html>
<html>
<head>
<script>
function submitValue() {
// Get the value entered by the user
var input = document.getElementById('value-input');
var value = input.value;
// Store the value in localStorage
localStorage.setItem('myValue', value);
// Redirect to the second page
window.location.href = 'page2.html';
}
</script>
</head>
<body>
<h1>Page 1</h1>
<p>Enter a value:</p>
<input type="text" id="value-input">
<button onclick="submitValue()">Submit</button>
</body>
</html>
This page asks the user for an input value and stores it in JavaScript’s local database called localStorage.
And now the below code place in the in the page2.html file:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
// Get the value from localStorage
var value = localStorage.getItem('myValue');
// Display the value on the page
var output = document.getElementById('value-output');
output.innerText = value;
};
</script>
</head>
<body>
<h1>Page 2</h1>
<p>The value you entered on the first page was:</p>
<p id="value-output"></p>
</body>
</html>
If you want then buy a good, reliable, secure web hosting service from here: click here
That’s it. If you enjoyed reading this article and have more questions please reach out to our support team via live chat or email and we would be glad to help you. we provide server hosting for all types of need and we can even get your server up and running with the service of your choice.