如何使用 JavaScript 在 HTML 頁面之間有效地傳遞變數？

透過JavaScript 將變數從一個HTML 頁面傳遞到另一個HTML 頁面

問題：

您需要在兩下個HTML 頁面之間傳遞一個變數使用JavaScript 的HTML 頁面。變數的值在第一頁的文字方塊中捕獲，並且您希望在使用者點擊按鈕後在第二頁上存取該值。但是，您在嘗試檢索第二頁上的變數時遇到“未定義”值。

解決方案：

使用localStorage：

您可以使用localStorage 來實現此功能，而不是使用不可靠且難以管理的全域變數。 localStorage 是一個瀏覽器 API，它提供了一種在瀏覽器中本機儲存資料的方法，即使在關閉應用程式或瀏覽器標籤後也是如此。與 cookie 相比，它具有較大的儲存限制。

實作：

1. 第1 頁（儲存變數）：

   <code class="javascript">window.onload = function() {
     var getInput = prompt("Hey type something here: ");
     localStorage.setItem("storageName", getInput);
   }</code>

   第1 頁（儲存變數）：

2. <code class="javascript">window.onload = function() {
     alert(localStorage.getItem("storageName"));
   }</code>

第2 頁（檢索變數）：

• 說明：

說明：

說明：

• 說明：
• 說明>在第1 頁，您使用localStorage.setItem("storageName", getInput) 將文字方塊中輸入的值儲存在localStorage 的storageName 鍵中。

On第 2 頁，您使用 localStorage.getItem("storageName") 擷取儲存在 storageName 鍵中的值並將其顯示在警報方塊中。 替代方法：Cookie： 您也可以使用Cookie 來傳遞變量，但它們的儲存限制較小，並且會隨每個請求發送回伺服器，這可能會影響效能和隱私。 會話儲存：會話儲存與 localStorage 類似，但僅持續目前會話，並在使用者關閉瀏覽器標籤時清除。如果您只需要儲存特定會話的數據，則可以使用它。

以上是如何使用 JavaScript 在 HTML 頁面之間有效地傳遞變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！