Passando Variabile tramite JavaScript da una pagina html ad un’altra pagina

Ho due pagine – “pagina 1” e “pagina 2”. A pagina 1 c’è una casella di testo con un valore di es. 100 e un pulsante alla fine.

Premendo il pulsante voglio che javascript salvi il valore della casella di testo in una variabile globale (?) E passi alla pagina 2. Con “window.onload” voglio una seconda funzione Javascript per avvisare il valore salvato a pagina1.

Ecco il mio codice 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 } 

  function read_price(){ alert("started_2"); alert(price); } 

Nella “pagina 1” ho questo pulsante di invio con:

  

Avvia la funzione Javascript e mi reindirizza correttamente alla mia pagina2.

Ma con questo sulla seconda pagina:

 window.onload=read_price(); 

Ricevo sempre un valore “indefinito” del prezzo variabile globale.

Ho letto molto su quelle variabili globali. Ad esempio in questa pagina: problema con la variabile globale .. Ma non riesco a farlo funzionare …

Perché non funziona?

Senza leggere il tuo codice ma solo il tuo scenario, risolverei usando localStorage . Ecco un esempio, userò prompt() in breve.

A pagina 1:

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

A pagina 2:

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

È anche ansible utilizzare i cookie, ma localStorage consente molti più spazi e non vengono inviati ai server quando si richiedono le pagine.

La tua opzione migliore qui è usare la stringa di query per “inviare” il valore.

come ottenere il valore della stringa di query utilizzando javascript

  • Quindi la pagina 1 reindirizza a page2.html? SomeValue = ABC
  • Pagina 2 può quindi leggere la stringa della query e in particolare la chiave ‘someValue’

Se questo è qualcosa di più di un esercizio di apprendimento, puoi prendere in considerazione le implicazioni di sicurezza di questo però.

Le variabili globali non ti aiuteranno qui poiché una volta ricaricata la pagina vengono distrutte.

Hai alcune opzioni differenti:

  • puoi utilizzare un router SPA come SammyJS, o Angularjs e ui-router, quindi le tue pagine sono stateful.
  • usa sessionStorage per memorizzare il tuo stato.
  • memorizza i valori sull’hash dell’URL.