Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Can I pass a value from one HTML page to another HTML page without passing it in URL?
Yes, you can pass values from one HTML page to another without exposing them in the URL. While HTML itself is a static markup language without native data transmission capabilities, JavaScript and server-side technologies provide several methods to share data between pages securely and efficiently.
Available Methods
The following techniques allow data transfer between HTML pages without URL parameters
Local Storage Browser-based storage that persists data across sessions
Session Storage Temporary storage that lasts only for the current session
Cookies Small data files stored in the browser
Form Submission with Hidden Fields POST method data transmission
Server-Side Session Storage Data stored on the server side
IndexedDB Client-side database for complex data structures
Using Local Storage
Local Storage is the most common client-side method for passing data between pages. It stores data in the browser and persists even after the browser is closed, making it ideal for user preferences and application state.
Example Storing Data on Page 1
The first page stores user data in local storage
<!DOCTYPE html>
<html>
<head>
<title>Page 1 - Store Data</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration</h2>
<form id="userForm">
<label>Name: <input type="text" id="userName" value="John Doe"></label><br><br>
<label>Email: <input type="email" id="userEmail" value="john@example.com"></label><br><br>
<button type="button" onclick="saveAndNavigate()">Save and Continue</button>
</form>
<script>
function saveAndNavigate() {
// Store data in local storage
var name = document.getElementById('userName').value;
var email = document.getElementById('userEmail').value;
localStorage.setItem('userName', name);
localStorage.setItem('userEmail', email);
// Navigate to second page
window.location.href = 'page2.html';
}
</script>
</body>
</html>
Example Retrieving Data on Page 2
The second page retrieves and displays the stored data
<!DOCTYPE html>
<html>
<head>
<title>Page 2 - Display Data</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Welcome to Your Profile</h2>
<div id="profileInfo"></div>
<button onclick="clearData()">Clear Data</button>
<script>
// Retrieve data from local storage
window.onload = function() {
var name = localStorage.getItem('userName');
var email = localStorage.getItem('userEmail');
if (name && email) {
document.getElementById('profileInfo').innerHTML =
'<p><strong>Name:</strong> ' + name + '</p>' +
'<p><strong>Email:</strong> ' + email + '</p>';
} else {
document.getElementById('profileInfo').innerHTML =
'<p>No user data found.</p>';
}
};
function clearData() {
localStorage.removeItem('userName');
localStorage.removeItem('userEmail');
location.reload();
}
</script>
</body>
</html>
The output displays the user information retrieved from local storage
Welcome to Your Profile Name: John Doe Email: john@example.com [Clear Data]
Using Session Storage
Session Storage works similarly to Local Storage but data is cleared when the browser tab is closed. It is ideal for temporary data that should not persist across sessions.
Example
<!DOCTYPE html>
<html>
<head>
<title>Session Storage Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Shopping Cart</h2>
<input type="text" id="productName" placeholder="Product Name" value="Laptop">
<input type="number" id="productPrice" placeholder="Price" value="999">
<button onclick="addToCart()">Add to Cart</button>
<button onclick="viewCart()">View Cart</button>
<div id="cartDisplay"></div>
<script>
function addToCart() {
var name = document.getElementById('productName').value;
var price = document.getElementById('productPrice').value;
var cartItem = { name: name, price: price };
sessionStorage.setItem('cartItem', JSON.stringify(cartItem));
alert('Item added to cart!');
}
function viewCart() {
var item = sessionStorage.getItem('cartItem');
var cartDisplay = document.getElementById('cartDisplay');
if (item) {
var cartItem = JSON.parse(item);
cartDisplay.innerHTML =
'<h3>Cart Contents:</h3>' +
'<p>Product: ' + cartItem.name + '</p>' +
'<p>Price: $' + cartItem.price + '</p>';
} else {
cartDisplay.innerHTML = '<p>Cart is empty</p>';
}
}
</script>
</body>
</html>
Using Cookies
Cookies store small amounts of data that can be accessed across different pages and sessions. They are automatically sent with HTTP requests to the same domain.
Example
<!DOCTYPE html>
<html>
<head>
<title>Cookie Data Transfer</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Preferences</h2>
<label>Theme:
<select id="theme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</label><br><br>
<button onclick="savePreference()">Save Preference</button>
<button onclick="loadPreference()">Load Preference</button>
<p id="result"></p>
<script>
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function savePreference() {
var theme = document.getElementById('theme').value;
setCookie('userTheme', theme, 30);
document.getElementById('result').innerHTML = 'Theme saved: ' + theme;
}
function loadPreference() {
var theme = getCookie('userTheme');
if (theme) {
document.getElementById('theme').value = theme;
document.getElementById('result').innerHTML = 'Theme loaded: ' + theme;
} else {
document.getElementById('result').innerHTML = 'No saved theme found';
}
}
</script>
</body>
</html>
Using Form Submission with Hidden Fields
Form submission with hidden fields allows data transfer via POST method without exposing values in the URL. This method requires server-side processing to handle the submitted data.
Example
<!DOCTYPE html>
<html>
<head>
<title>Hidden Form Data Transfer</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Order Form</h2>
<form action="process-order.php" method="POST" id="orderForm">
<label>Product:
<select id="product" onchange="updatePrice()">
<option value="laptop">Laptop - $999</option>
<option value="phone">Phone - $599</option>
</select>
</label><br><br>
<label>Quantity: <input type="number" id="quantity" value="1" min="1"></label><br><br>
<!-- Hidden fields to store calculated values -->
<input type="hidden" id="hiddenProduct" name="product" value="laptop">
<input type="hidden" id="hiddenPrice" name="price" value="999">
<input type="hidden" id="hiddenTotal" name="total" value="999">
<button type="button" onclick="calculateAndSubmit()">Place Order</button>
</form>
<p id="orderSummary"></p>
<script>
function updatePrice() {
var product = document.getElementById('product').value;
var price = product === 'laptop' ? 999 : 599;
document.getElementById('hiddenPrice').value = price;
calculateTotal();
}
function calculateTotal() {
var price = parseInt(document.getElementById('hiddenPrice').value);
var quantity = parseInt(document.getElementById('quantity').value);
var total = price * quantity;
document.getElementById('hiddenTotal').value = total;
}
function calculateAndSubmit() {
var product = document.getElementById('product').value;
var quantity = document.getElementById('quantity').value;
document.getElementById('hiddenProduct').value = product;
calculateTotal();
// Display order summary (in real application, form would be submitted)
var total = document.getElementById('hiddenTotal').value;
document.getElementById('orderSummary').innerHTML =
'<strong>Order Summary:</strong><br>' +
'Product: ' + product + '<br>' +
'Quantity: ' + quantity + '<br>' +
'Total: $' + total + '<br>' +
'<em>(Data would be sent via POST to server)</em>';
}
</script>
</body>
</html>
Updated on: 2026-03-16T21:38:54+05:30
6K+ Views
Advertisements