Maison > interface Web > js tutoriel > Comment transmettre des variables entre les pages en JavaScript à l'aide du stockage local ?

Comment transmettre des variables entre les pages en JavaScript à l'aide du stockage local ?

Mary-Kate Olsen
Libérer: 2024-10-24 07:52:01
original
1110 Les gens l'ont consulté

How to Pass Variables between Pages in JavaScript using Local Storage?

Passer des variables via JavaScript de page en page

Votre objectif est de transmettre la valeur d'une variable de "page 1" à "page 2, " et affichez-le en utilisant window.onload. Cependant, l'approche des variables globales que vous utilisez semble poser des problèmes.

Stockage local : une approche différente

Au lieu de vous fier aux variables globales, envisagez d'utiliser le API de stockage local. Cette approche vous permet de stocker des données localement dans le navigateur, indépendamment des pages individuelles. Voici une solution révisée utilisant localStorage :

page1.html

<code class="html"><script>
  window.onload = function() {
    var getInput = prompt("Enter your value:");
    localStorage.setItem("myValue", getInput);
  };
</script>

...

<input type="submit" value="Go To Page 2" onclick="location.href='page2.html'"></code>
Copier après la connexion

page2.html

<code class="html"><script>
  window.onload = function() {
    var getValue = localStorage.getItem("myValue");
    alert("Value from page 1: " + getValue);
  };
</script></code>
Copier après la connexion

Ceci Cette approche évite les problèmes de variables globales que vous rencontriez et vous permet de transmettre efficacement la valeur de la variable entre les deux pages.

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal