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?
3 answers
solution1
2 ACCPTED 2018-06-20 09:18:25
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>
solution2
2 2018-06-20 09:18:47
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.
solution3
0 2018-06-20 09:23:01
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.