使用JavaScript在HTML頁面之間傳遞變數

Question

我有兩個頁面 - "頁面1"和"頁面2"。在頁面1上有一個文字框，值為例如100，以及一個按鈕。

按下按鈕後，我希望JavaScript將文字方塊的值保存在一個全域變數中，並跳到頁面2。使用"window.onload"，我希望第二個JavaScript函數在頁面1上彈出已儲存的值。

這是我的JavaScript程式碼：

<script type="text/javascript">

var price; //在函數外部宣告 = 全域變數 ?

function save_price(){

    alert("started_1"); //僅供參考

    price = document.getElementById('the_id_of_the_textbox').value;

    alert(price); //僅供參考
}

<script type="text/javascript">

function read_price(){

    alert("started_2");

    alert(price);

}

在"頁1"上，我有一個發送按鈕：

<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/> ;

它啟動了JavaScript函數並正確地將我重定向到我的頁面2。

但在第二個頁面：

window.onload=read_price();

我總是得到全域變數price的"undefined"值。

我已經閱讀了很多關於這些全域變數的資料。例如在這個頁面：Problem with global variable.. 但是我無法讓它正常工作...

為什麼這不起作用？

Answer 1

您在這裡的最佳選擇是使用查詢字串來「發送」值。

如何使用JavaScript取得查詢字串值

• 所以頁面1重定向到page2.html?someValue=ABC
• 頁面2可以讀取查詢字串，特別是鍵「someValue」

如果這不僅僅是一個學習練習，您可能需要考慮這樣做的安全性問題。

全域變數在這裡對您沒有幫助，因為一旦頁面重新加載，它們就會被銷毀。

Answer 2

在沒有閱讀您的程式碼，只有您的場景的情況下，我會使用 localStorage 來解決。 以下是一個範例，我將使用 prompt() 來簡化。

在頁面1：

window.onload = function() {
   var getInput = prompt("嘿，在这里输入一些内容：");
   localStorage.setItem("storageName",getInput);
}

在頁面2：

window.onload = alert(localStorage.getItem("storageName"));

您也可以使用 cookies，但是 localStorage 允許更多的空間，並且在請求頁面時不會將它們發送回伺服器。