Share Data Between HTML Pages

Share data between HTML pages

why don't you store your values in HTML5 storage objects such as sessionStorage or localStorage, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.

To store values for a session:

sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')

or more permanently:

localStorage.setItem('label', 'value')
localStorage.getItem('label')

So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..

Passing data among different HTML pages

You can do this with use of localstorage

First Page: (first.html)

localStorage.setItem("square_first", "A");

Second Page: (second.html)

localStorage.getItem("square_first");

Transfer table data between pages with javascript

You can use the localStorage.

localStorage is kind of map object in your browser which you can store any data you want in it using the setItem and getItem methods.



Try to save your table data into a json object and store it the local storage, then in the confirmProducts.html page to can pull it out.

Something like this:

// mainPage.html

const products = {
// ... the table data
}

localStorage.setItem('products', JSON.stringify(products));


// confirmProducts.html

const products = localStorage.getItem('products')

Pass data between two HTML pages (Google Apps Script)

Use localstorage
a.html

localStorage.setItem('id',1) 

b.html

var id  = localStorage.getItem('id')

the other way is to put it in a js file and import it in both html

Passing a variable between HTML pages using JavaScript

The code below works for me, which isn't much different than yours. Maybe it's how your importing your javascript?

index.html

<html>
<head>
<title>Example</title>
<script type="text/javascript" src='./index.js'></script>
</head>
<body>
<input type = "text" id = "name">
<button onclick = "sv(); window.location.href = 'secondPage.html'">Submit now</button>
</body>
</html>

index.js

function sv() {
sessionStorage.setItem("theirname", document.getElementById("name").value);
}

secondPage.html

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p id="output"></p>
</body>
<script type="text/javascript" src='./secondPage.js'></script>
<!-- The script must come after and not in the head, or else document.getElementById will be null -->
</html>

secondPage.js

document.getElementById("output").innerHTML = sessionStorage.getItem("theirname");


Related Topics



Leave a reply



Submit