Comment partager des données entre des pages HTML en JavaScript : transférer des variables avec window.onload et localStorage

Transfert de variables entre pages HTML en JavaScript

Dans les scénarios impliquant plusieurs pages HTML, il est souvent nécessaire de transférer des variables d'une page à une autre . Pour relever ce défi, cet article explorera deux méthodes : window.onload et localStorage, fournissant une solution complète de partage de données entre les pages.

Arrière-plan

Le code fourni comprend deux fonctions : save_price() et read_price(), dans le but de stocker et de récupérer une valeur saisie par l'utilisateur dans une variable globale. Cependant, le problème survient lors de l'utilisation de la variable globale price à la page 2, où elle renvoie « non défini » en raison du manque de portée globale en JavaScript.

Solution utilisant window.onload

La difficulté avec l'utilisation de window.onload est que la tentative d'appel de fonction est incorrecte. Le format correct doit être :

window.onload = function() {
  read_price();
};

Cette solution, bien que fonctionnelle, présente certaines limites. Les variables globales peuvent créer des problèmes de maintenance et de lisibilité du code, en particulier dans les applications plus volumineuses.

Solution alternative utilisant localStorage

localStorage offre une approche plus sûre et plus efficace du transfert de données entre pages sans avoir besoin de variables globales. Ce mécanisme permet le stockage de paires clé-valeur qui persistent lors des rechargements de pages et des sessions de navigateur.

Implémentation du code

Page 1 :

window.onload = function() {
  var getInput = prompt("Enter a value: ");
  localStorage.setItem("value", getInput);
};

Page 2 :

window.onload = function() {
  alert(localStorage.getItem("value"));
};

Avantages du stockage local

• Stockage persistant : Les données restent accessibles même après la fermeture et la réouverture du navigateur.
• Vaste capacité de stockage : Permet de stocker de grandes quantités de données, contrairement aux cookies.
• Évitement côté serveur : Contrairement aux cookies, les données ne sont pas renvoyées au serveur à chaque demande.

Conclusion

Window.onload et localStorage fournit des méthodes pour transférer des variables entre les pages, localStorage devenant la solution privilégiée en raison de ses nombreux avantages et de sa facilité d'utilisation. En tirant parti de la puissance de localStorage, les développeurs peuvent partager efficacement des données entre les pages, améliorant ainsi l'expérience utilisateur et rationalisant les processus de développement.

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!