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

Question

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

6

基本上，我有两个HTML页面。一个页面有一个按钮并显示按钮生成的数字，另一个页面（第二个页面）仅用于显示。然后我有一个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

页面2具有相同的代码，但在页面1中更改值时，它无法获取这些值。

Script.js

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

输出是这样的。 p id="nom">1

所以，基本上就是这样，我无法在第一页更改值时获取第二页上的值。有什么帮助吗？

- Miguel

3

把它们添加到第一页的本地存储中？ - Pete

不标记此问题为“Java”。没有证据表明这个问题需要Java知识。 - XtremeBaumer

三种方式：本地存储、WebSocket 或通过 URL 传递参数... - Nikola Lukic

可能是在页面加载之间保留变量的重复问题。 - user5734311

3个回答

2

尝试使用本地存储来实现相同的功能:

// 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存储更加安全，可以大量存储本地数据，而不会影响网站性能。

- Hiteshdua1

0

localStorage可以为您完成任务，

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

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

在页面1上设置值

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

获取第二页的值

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

- dhaker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dhrutika Rathod · Accepted Answer

将变量值存储在本地存储中，方法如下：

页面 1

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

第二页

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

在您的情况下，应该是这样的：

第一页

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

第二页

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