Comment transmettre efficacement une variable entre des pages HTML à l'aide de JavaScript ?

Passer une variable via JavaScript d'une page HTML à une autre

Problème :

Vous devez transmettre une variable entre deux Pages HTML utilisant JavaScript. La valeur de la variable est capturée dans une zone de texte sur la première page et vous souhaitez accéder à cette valeur sur la deuxième page après que l'utilisateur a cliqué sur un bouton. Cependant, vous rencontrez une valeur « non définie » lorsque vous tentez de récupérer la variable sur la deuxième page.

Solution :

Utilisation de localStorage :

Au lieu d'utiliser des variables globales, qui peuvent être peu fiables et difficiles à gérer, vous pouvez utiliser localStorage pour obtenir cette fonctionnalité. localStorage est une API de navigateur qui permet de stocker des données localement dans le navigateur, même après la fermeture de l'application ou de l'onglet du navigateur. Il a une limite de stockage importante par rapport aux cookies.

Mise en œuvre :

1. Sur la page 1 (Enregistrer la variable) :

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

2. À la page 2 (Récupérer la variable) :

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

Explication :

• Sur la page 1, vous utilisez localStorage.setItem("storageName", getInput) pour stocker la valeur saisie dans la zone de texte dans la clé storageName de localStorage.
• On Page 2, vous utilisez localStorage.getItem("storageName") pour récupérer la valeur stockée dans la clé storageName et l'afficher dans une boîte d'alerte.

Approches alternatives :

• Cookies : Vous pouvez également utiliser des cookies pour transmettre la variable, mais ils ont une limite de stockage plus petite et sont renvoyés au serveur à chaque demande, ce qui peut avoir un impact sur les performances et la confidentialité.
• Stockage de session : Le stockage de session est similaire à localStorage mais ne dure que pour la session en cours et est effacé lorsque l'utilisateur ferme l'onglet de son navigateur. Il peut être utilisé si vous avez uniquement besoin de stocker des données pour une session spécifique.

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!