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;背景：#FFFFF“> 1

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

第2页

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

Script.js

any

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

所以，基本上就是这样，当我在第1页中更改它们时，我无法获得第2页上的值。有帮助吗？

Answer 1

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

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

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

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

Answer 3

localStorage将为您完成任务，

localStorage允许保存键/值   在网络浏览器中配对。

localStorage对象存储没有到期日期的数据。数据   关闭浏览器后不会删除它，并且可以使用   第二天，一周或一年。

在第1页上设置值

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

在第2页上获取价值

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

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

3 个答案: