it-swarm.com.de

Übergeben von Variablen durch JavaScript von einer HTML-Seite an eine andere Seite

Ich habe zwei Seiten - "Seite 1" und "Seite 2". Auf Seite 1 befindet sich ein Textfeld mit einem Wert von z. 100 und ein Button am Ende.

Durch Drücken des Buttons 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 eine zweite Javascript-Funktion, die den auf page1 gespeicherten Wert anzeigt.

Hier ist mein Javascript-Code:

<script type="text/javascript">

var price; //declare outside the function = global variable ?

function save_price(){

    alert("started_1"); //just for information

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

    alert(price); //just for information         
}

<script type="text/javascript">

function read_price(){

    alert("started_2");

    alert(price);

}

Auf "Seite 1" habe ich diesen Send-Button mit:

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

Es startet die Javascript-Funktion und leitet mich korrekt auf meine Seite2 um.

Aber auf dieser zweiten Seite:

window.onload=read_price(); 

Ich bekomme immer einen "undefinierten" Wert des globalen variablen Preises.

Ich habe viel über diese globalen Variablen gelesen. Z.B. auf dieser Seite: Problem mit globaler Variable .. Aber ich kann es nicht zum Laufen bringen ...

Warum funktioniert das nicht?

12
Kronwied

Ohne Ihren Code zu lesen, sondern nur Ihr Szenario, würde ich mit localStorage lösen. Hier ist ein Beispiel, ich werde Prompt() kurz verwenden.

Auf Seite 1:

window.onload = function() {
   var getInput = Prompt("Hey type something here: ");
   localStorage.setItem("storageName",getInput);
}

Auf Seite 2:

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

Sie können auch Cookies verwenden, localStorage lässt jedoch viel mehr Leerzeichen zu und diese werden nicht an Server zurückgesendet, wenn Sie Seiten anfordern.

40
potasmic

Die beste Option hier ist, den Abfrage-String zu verwenden, um den Wert zu "senden". 

Wie erhalte ich den Abfragestringwert mit Javascript

  • Seite 1 leitet also zu page2.html? SomeValue = ABC um 
  • Dann kann die Abfragezeichenfolge und insbesondere der Schlüssel 'someValue' auf Seite 2 gelesen werden.

Wenn dies mehr als nur eine Lernübung ist, sollten Sie die Auswirkungen auf die Sicherheit in Betracht ziehen. 

Globale Variablen helfen hier nicht, da die Seite nach dem erneuten Laden der Seite zerstört wird. 

6
LiamB

Sie haben verschiedene Möglichkeiten:

  • sie können einen SPA-Router wie SammyJS oder Angularjs und einen UI-Router verwenden, so dass Ihre Seiten zustandsbehaftet sind. 
  • verwenden Sie sessionStorage, um Ihren Status zu speichern. 
  • speichern Sie die Werte im URL-Hash. 
0
Martin