Übergeben Sie Variablen zwischen HTML-Seiten mithilfe von JavaScript

Question

Ich habe zwei Seiten – „Seite 1“ und „Seite 2“. Auf Seite 1 gibt es ein Textfeld mit einem Wert von beispielsweise 100 und eine Schaltfläche.

Nachdem ich auf die Schaltfläche geklickt habe, möchte ich, dass JavaScript den Wert des Textfelds in einer globalen Variablen speichert und zu Seite 2 springt. Mit „window.onload“ möchte ich, dass die zweite JavaScript-Funktion den gespeicherten Wert auf Seite 1 einfügt.

Das ist mein JavaScript-Code:

<script type="text/javascript">

var price; //Außerhalb der Funktion deklariert = globale Variable?

Funktion save_price(){

    Alert("started_1"); //Nur als Referenz

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

    Alert(Preis); //nur als Referenz
}

<script type="text/javascript">

Funktion read_price(){

    alarm("started_2");

    Alert(Preis);

}

Auf „Seite 1“ habe ich einen Senden-Button:

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

Es startet die JavaScript-Funktion und leitet mich korrekt zu meiner Seite 2 weiter.

Aber auf der zweiten Seite:

window.onload=read_price();

Ich erhalte immer den „undefinierten“ Wert für den globalen variablen Preis.

Ich habe viel über diese globalen Variablen gelesen. Zum Beispiel auf dieser Seite: Problem mit globaler Variable. Aber ich bekomme es nicht zum Laufen...

Warum funktioniert das nicht?

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 允许更多的空间，并且在请求页面时不会将它们发送回服务器。