Comment transmettre des variables entre des pages HTML en toute sécurité avec JavaScript ?

Passer des variables entre des pages HTML avec JavaScript

Dans le développement Web, il est souvent nécessaire de transférer des données entre deux pages HTML. Une approche courante consiste à utiliser JavaScript pour stocker les données dans une variable globale et les récupérer sur la deuxième page. Cependant, cette méthode peut rencontrer des problèmes si la variable globale n'est pas correctement déclarée ou accessible.

Considérez le scénario suivant :

• Vous disposez de deux pages, "page 1" et "page 2".
• Sur la page 1, une zone de texte contient une valeur (par exemple, 100).
• Lorsque vous cliquez sur un bouton, JavaScript enregistre la valeur de la zone de texte dans une variable globale et redirige vers la page 2.
• Sur la page 2, une fonction onload tente de récupérer et d'afficher la valeur stockée sur la page 1.

Cependant, la fonction onload renvoie toujours « non défini » pour la variable globale.

Solution utilisant le stockage local

Pour résoudre ce problème, une approche alternative consiste à utiliser localStorage. Le stockage local offre un moyen plus fiable et sécurisé de stocker et de récupérer des données.

• À la page 1 :

  Stockez la valeur de la zone de texte dans localStorage à l'aide la méthode setItem(), comme suit :

  <code class="javascript">window.onload = function() {
    var getInput = prompt("Hey type something here: ");
    localStorage.setItem("storageName", getInput);
  }</code>

• À la page 2 :

  Récupérez la valeur stockée de localStorage à l'aide de getItem( ) et affichez-la à l'aide de alert(), comme indiqué ci-dessous :

  <code class="javascript">window.onload = function() {
    alert(localStorage.getItem("storageName"));
  }</code>

En utilisant localStorage, vous pouvez garantir le stockage et la récupération cohérents des données entre les différentes pages HTML. Cette approche est à la fois fiable et efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!