Heim >Web-Frontend >js-Tutorial >Wie übergebe ich mit JavaScript effektiv eine Variable zwischen HTML-Seiten?

Wie übergebe ich mit JavaScript effektiv eine Variable zwischen HTML-Seiten?

Barbara Streisand
Barbara StreisandOriginal
2024-10-24 07:58:30432Durchsuche

How to Pass a Variable between HTML Pages using JavaScript Effectively?

Variable über JavaScript von einer HTML-Seite an eine andere übergeben

Problem:

Sie müssen eine Variable zwischen zwei übergeben HTML-Seiten mit JavaScript. Der Wert der Variablen wird in einem Textfeld auf der ersten Seite erfasst und Sie möchten auf der zweiten Seite auf diesen Wert zugreifen, nachdem der Benutzer auf eine Schaltfläche geklickt hat. Beim Versuch, die Variable auf der zweiten Seite abzurufen, stoßen Sie jedoch auf einen „undefinierten“ Wert.

Lösung:

Verwendung von localStorage:

Anstatt globale Variablen zu verwenden, die unzuverlässig und schwer zu verwalten sein können, können Sie localStorage verwenden, um diese Funktionalität zu erreichen. localStorage ist eine Browser-API, die eine Möglichkeit bietet, Daten lokal im Browser zu speichern, auch nach dem Schließen der App oder des Browser-Tabs. Es hat im Vergleich zu Cookies ein großes Speicherlimit.

Implementierung:

  1. Auf Seite 1 (Variable speichern):

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

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

Erklärung:

  • Auf Seite 1 verwenden Sie localStorage.setItem("storageName", getInput), um den im Textfeld eingegebenen Wert im Schlüssel „storageName“ von localStorage zu speichern.
  • Ein Auf Seite 2 verwenden Sie localStorage.getItem("storageName"), um den im storageName-Schlüssel gespeicherten Wert abzurufen und ihn in einem Warnfeld anzuzeigen.

Alternative Ansätze:

  • Cookies: Sie können auch Cookies verwenden, um die Variable zu übergeben, diese haben jedoch ein geringeres Speicherlimit und werden bei jeder Anfrage an den Server zurückgesendet, was sich auf Leistung und Datenschutz auswirken kann.
  • Sitzungsspeicher: Der Sitzungsspeicher ähnelt localStorage, dauert jedoch nur für die aktuelle Sitzung und wird gelöscht, wenn der Benutzer seinen Browser-Tab schließt. Es kann verwendet werden, wenn Sie nur Daten für eine bestimmte Sitzung speichern müssen.

Das obige ist der detaillierte Inhalt vonWie übergebe ich mit JavaScript effektiv eine Variable zwischen HTML-Seiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn