如何在页面之间共享JS变量？
[英]How can I share JS variables between pages?
问题描述
So basically I have 2 html pages. 
所以基本上我有2个html页面。 1 has a button and displays the numbers the button generates, the other page (2) only displays. 1有一个按钮，并显示该按钮生成的数字，其他页面（2）仅显示。 Then I have a script.js file so both files can get the values there. 然后，我有一个script.js文件，因此两个文件都可以在那里获取值。 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. 事实是，当我在第1页上包含第2页时，它会获取值，但与第1页分开时，即使使用相同的脚本也不会获得任何值。
So basically it's something like this 所以基本上是这样的
Page 1 第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. 这是从ID为（nom）的按钮获取值，并将1加到已有的数字上。
Page 2 第2页
Page two has the same code, but is not getting the values when i change them in page 1 with the buttons. 第二页具有相同的代码，但是当我使用按钮在第1页中更改它们时未获取值。
Script.js Script.js
document.getElementById("nom").innerHTML = parseInt(document.getElementById("nom").innerHTML) + 1;
The output is done like this. 输出是这样完成的。 p id="nom">1 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? 因此，基本上就是这样，当我在第1页中更改它们时我无法获得第2页上的值。
3 个解决方案
解决方案1
2 已采纳 2018-06-20 09:18:25
Store your variable value in localstorage like this: 像这样将变量值存储在localstorage中：
Page 1 第1页
localStorage.setItem("key", "yourvalue");
page 2 第2页
document.getElementById("yourVariable").innerHTML = localStorage.getItem("key");
In your case, It will be: 在您的情况下，它将是：
Page 1 第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 第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>
解决方案2
2 2018-06-20 09:18:47
Try using localstorage for the same : 尝试使用localstorage进行相同的操作：
// 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.
解决方案3
0 2018-06-20 09:23:01
localStorage will do task for you, localStorage将为您完成任务，
The localStorage allow to save key/value pairs in a web browser.
The localStorage object stores data with no expiration date.
Set value on Page 1 在第1页上设置值
localStorage.setItem("nom", parseInt(document.getElementById("nom").innerHTML) );
Get Value on Page 2 在第2页上获取价值
document.getElementById("nom").innerHTML = localStorage.getItem("nom")+1;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.