如何在 JavaScript 中的 HTML 頁面之間共用資料：使用 window.onload 和 localStorage 傳輸變數

JavaScript 中HTML 頁面之間傳遞變數

在涉及多個HTML 頁面的場景中，經常需要將變數從一個頁面傳遞到另一個頁面。為了因應這項挑戰，本文將探討兩種方法：window.onload 和 localStorage，提供頁間共享資料的全面解決方案。

後台

提供的程式碼包含兩個函數：save_price() 和 read_price()，其目標是在全域變數中儲存和擷取使用者輸入值。然而，在第 2 頁使用全域變數 Price 時出現了問題，由於 JavaScript 中缺乏全域作用域，它會傳回「未定義」。

使用 window.onload 的解決方案

使用window.onload的困難在於嘗試的函數呼叫不正確。正確的格式應該是：

window.onload = function() {
  read_price();
};

此解決方案雖然有效，但具有一定的限制。全域變數會對維護和程式碼可讀性帶來挑戰，尤其是在大型應用程式中。

使用 localStorage 的替代解決方案

localStorage 提供了一種更安全、更有效率的資料傳輸方法無需全域變數的頁面。此機制允許儲存在頁面重新載入和瀏覽器會話中持續存在的鍵值對。

程式碼實作

第1 頁：

window.onload = function() {
  var getInput = prompt("Enter a value: ");
  localStorage.setItem("value", getInput);
};

第2 頁：

window.onload = function() {
  alert(localStorage.getItem("value"));
};

第2 頁：

• localStorage 的好處
• 持久儲存： 即使關閉並重新開啟瀏覽器後，資料仍可存取。
• 龐大的儲存容量： 與 cookie 不同，允許儲存大量資料。

伺服器端避免： 與 cookie 不同，每次請求時資料不會傳回伺服器。

結論window.onload 和localStorage 提供了在頁面之間傳輸變數的方法，localStorage 由於其廣泛的優點和易用性而成為首選解決方案。透過利用 localStorage 的強大功能，開發者可以有效率地跨頁面共享數據，增強使用者體驗並簡化開發流程。

以上是如何在 JavaScript 中的 HTML 頁面之間共用資料：使用 window.onload 和 localStorage 傳輸變數的詳細內容。更多資訊請關注PHP中文網其他相關文章！