如何在页面之间共享JS变量？

Question

所以基本上我有2个html页面。 1有一个按钮，并显示该按钮生成的数字，其他页面（2）仅显示。 然后，我有一个script.js文件，因此两个文件都可以在那里获取值。 事实是，当我在第1页上包含第2页时，它会获取值，但与第1页分开时，即使使用相同的脚本也不会获得任何值。

所以基本上是这样的

第1页

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

这是从ID为（nom）的按钮获取值，并将1加到已有的数字上。

第2页

第二页具有相同的代码，但是当我使用按钮在第1页中更改它们时未获取值。

Script.js

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

输出是这样完成的。 p id =“ nom”> 1

因此，基本上就是这样，当我在第1页中更改它们时我无法获得第2页上的值。

Answer 1

像这样将变量值存储在localstorage中：

第1页

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

第2页

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

在您的情况下，它将是：

第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>

第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>

Answer 2

尝试使用localstorage进行相同的操作：

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

或对于对象，您可以使用

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));

借助Web存储，Web应用程序可以在用户的浏览器中本地存储数据。

在HTML5之前，应用程序数据必须存储在cookie中，并包含在每个服务器请求中。 Web存储更加安全，并且可以在本地存储大量数据，而不会影响网站性能。

Answer 3

localStorage将为您完成任务，

localStorage允许将键/值对保存在Web浏览器中。

localStorage对象存储没有到期日期的数据。 当浏览器关闭时，数据不会被删除，并且在第二天，每周或每年都可用。

在第1页上设置值

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

在第2页上获取价值

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

如何在页面之间共享JS变量？

问题描述

3 个解决方案

解决方案1
2 已采纳 2018-06-20 09:18:25

解决方案2
2 2018-06-20 09:18:47

解决方案3
0 2018-06-20 09:23:01

如何在页面之间共享JS变量？

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-06-20 09:18:25

解决方案2 2 2018-06-20 09:18:47

解决方案3 0 2018-06-20 09:23:01

解决方案1
2 已采纳 2018-06-20 09:18:25

解决方案2
2 2018-06-20 09:18:47

解决方案3
0 2018-06-20 09:23:01