Transmettre des variables entre les pages HTML à l'aide de JavaScript

Question

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.

Après avoir appuyé sur le bouton, je souhaite que JavaScript enregistre la valeur de la zone de texte dans une variable globale et passe à la page 2. En utilisant "window.onload", je souhaite que la deuxième fonction JavaScript affiche la valeur enregistrée sur la page 1.

Voici mon code JavaScript :

<script type="text/javascript">

var price; //Déclaré en dehors de la fonction = variable globale ?

fonction save_price(){

    alert("started_1"); //Pour référence seulement

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

    alert(prix); //pour référence seulement
}</pré>
<pre class="brush:php;toolbar:false;"><script type="text/javascript">

fonction read_price(){

    alerte("started_2");

    alerte(prix);

}</pré>
<p>Sur la "Page 1", j'ai un bouton d'envoi : </p>
<pre class="brush:php;toolbar:false;"><input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/> ;</pré>
<p>Il lance la fonction JavaScript et me redirige correctement vers ma page 2. </p>
<p>Mais sur la deuxième page : </p>
<pre class="brush:php;toolbar:false;">window.onload=read_price();

J'obtiens toujours la valeur "non définie" pour le prix variable global.

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

Pourquoi cela ne fonctionne-t-il pas ?

Answer 1

Votre meilleure option ici est d'utiliser une chaîne de requête pour "envoyer" la valeur.

Comment obtenir la valeur d'une chaîne de requête à l'aide de JavaScript

• Donc la page 1 redirige vers la page2.html?someValue=ABC
• La page 2 peut lire la chaîne de requête, en particulier la clé "someValue"

S’il s’agit de plus qu’un simple exercice d’apprentissage, vous voudrez peut-être réfléchir à la sécurité de cette opération.

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

Answer 2

Sans lire votre code, uniquement votre scénario, j'utiliserais localStorage pour le résoudre. Voici un exemple que j'utiliserai prompt() pour simplifier.

À la page 1 :

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

À la page 2 :

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

Vous pouvez également utiliser des cookies, mais localStorage autorise plus d'espace et ne les renvoie pas au serveur lorsque la page est demandée.