如何在頁面之間共享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