web-dev-qa-db-fra.com

Passer de variable en JavaScript d'une page HTML à une autre page

J'ai deux pages - "page 1" et "page 2". Sur la page 1, il y a une zone de texte avec une valeur de par exemple. 100 et un bouton à la fin.

En appuyant sur le bouton, je souhaite que javascript enregistre la valeur de la zone de texte dans une variable globale (?) Et passe à la page 2. Avec "window.onload", je souhaite une seconde fonction Javascript pour alerter la valeur enregistrée à la page1.

Voici mon code Javascript:

<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);

}

Sur "page 1", j'ai ce bouton d'envoi avec:

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

Il démarre la fonction Javascript et me redirige correctement vers ma page2.

Mais avec cela sur la deuxième page:

window.onload=read_price();

Je reçois toujours une valeur "indéfinie" du prix variable global.

J'ai beaucoup lu sur ces variables globales. Par exemple. à cette page: Problème avec la variable globale .. Mais je ne peux pas le faire fonctionner ...

Pourquoi ça ne marche pas?

javascripthtmlvariablesundefinedglobal
12
Kronwied

Sans lire votre code mais simplement votre scénario, je résoudrais en utilisant localStorage. Voici un exemple, je vais utiliser Prompt() pour faire court.

Sur la page1: 

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

Sur la page2: 

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

Vous pouvez également utiliser des cookies, mais localStorage autorise beaucoup plus d'espaces et ceux-ci ne sont pas renvoyés aux serveurs lorsque vous demandez des pages.

30
potasmic

Votre meilleure option ici est d’utiliser la chaîne de requête pour «envoyer» la valeur. 

comment obtenir une valeur de chaîne de requête en utilisant javascript

  • Donc, la page 1 redirige vers page2.html? SomeValue = ABC 
  • Page 2 can thenread la chaîne de requête et plus précisément la clé 'someValue'

Si ceci est autre chose qu'un exercice d'apprentissage, vous voudrez peut-être en examiner les implications pour la sécurité. 

Les variables globales ne vous aideront pas ici car une fois la page rechargée, elles sont détruites. 

6
LiamB

Vous avez plusieurs options différentes:

  • vous pouvez utiliser un routeur SPA comme SammyJS, ou Angularjs et ui-router, afin que vos pages soient avec état 
  • utilisez sessionStorage pour stocker votre état. 
  • stocker les valeurs sur le hachage de l'URL. 
0
Martin