How can I share JS variables between pages?

Question

So basically I have 2 html pages. 1 has a button and displays the numbers the button generates, the other page (2) only displays. Then I have a script.js file so both files can get the values there. The thing is that when I include page 2 on 1, it gets the values, but when separated from page 1, it doesn't get any values even with the same script.

So basically it's something like this

Page 1

id="nom" style="font-size: 100px; margin-bottom: 5px; text-align: center; font-family:Arial; background: #FFFFF">1

This one gets value from the button with the id (nom) and adds 1 to the number already there.

Page 2

Page two has the same code, but is not getting the values when i change them in page 1 with the buttons.

Script.js

document.getElementById("nom").innerHTML = parseInt(document.getElementById("nom").innerHTML) + 1;

The output is done like this. p id="nom">1

So, this is basically it, i can't get the values on page 2 when I change them in page 1. Any help?

add them to [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) on page one? — Pete, Jun 20 '18 at 09:16
Not tagging this question as `Java`. There is no evidence taht this question requires java knowledge — XtremeBaumer, Jun 20 '18 at 09:17
Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — , Jun 20 '18 at 09:19

Dhrutika Rathod · Accepted Answer · 2018-06-20T10:48:38.777

Store your variable value in localstorage like this:

Page 1

localStorage.setItem("key", "yourvalue");

page 2

document.getElementById("yourVariable").innerHTML = localStorage.getItem("key");

In your case, It will be:

Page 1

<html>
<head>Page 1</head>
<body>
<p id="nom">1</p>
<button onclick="YourFunctionName()">Your Button</button>

<script>
function YourFunctionName(){
    document.getElementById("nom").innerHTML = parseInt(document.getElementById("nom").innerHTML) + 1;
    localStorage.setItem("key", parseInt(document.getElementById("nom").innerHTML));
}
</script>
</body>
</html>

Page 2

<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

</head>

<body>
<p id="nome"></p>

<script>
$(document).ready(function(){
    document.getElementById("nome").innerHTML = localStorage.getItem("key");
});
</script>
</body>
</html>

This example only works if the pages are on the same domain. It's also possible to [share variables across domains](https://stackoverflow.com/questions/33957477/cross-domain-localstorage-with-javascript), using `window.postMessage()` with an embedded iframe. — Anderson Green, Jun 09 '21 at 23:24

Hiteshdua1 · Answer 2 · 2018-06-20T09:27:05.080

Try using localstorage for the same :

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Or for Objects , you can use

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage from Page 1
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage from Page 2
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

With web storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

score 0 · Answer 3 · answered Jun 20 '18 at 09:23

localStorage will do task for you,

The localStorage allow to save key/value pairs in a web browser.

The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Set value on Page 1

localStorage.setItem("nom", parseInt(document.getElementById("nom").innerHTML) );

Get Value on Page 2

document.getElementById("nom").innerHTML = localStorage.getItem("nom")+1;

How can I share JS variables between pages?

3 Answers3