So teilen Sie Daten zwischen HTML-Seiten in JavaScript: Übertragen von Variablen mit window.onload und localStorage

Übertragen von Variablen zwischen HTML-Seiten in JavaScript

In Szenarien mit mehreren HTML-Seiten besteht häufig die Notwendigkeit, Variablen von einer Seite auf eine andere zu übertragen . Um dieser Herausforderung zu begegnen, werden in diesem Artikel zwei Methoden untersucht: window.onload und localStorage, die eine umfassende Lösung für den Datenaustausch zwischen Seiten bieten.

Hintergrund

Der bereitgestellte Code enthält zwei Funktionen: save_price() und read_price() mit dem Ziel, einen Benutzereingabewert in einer globalen Variablen zu speichern und abzurufen. Das Problem tritt jedoch auf, wenn die globale Variable Preis auf Seite 2 verwendet wird, wo sie aufgrund des fehlenden globalen Gültigkeitsbereichs in JavaScript „undefiniert“ zurückgibt.

Lösung mit window.onload

Die Schwierigkeit bei der Verwendung von window.onload besteht darin, dass der versuchte Funktionsaufruf falsch ist. Das richtige Format sollte sein:

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

Diese Lösung ist zwar funktionsfähig, weist jedoch bestimmte Einschränkungen auf. Globale Variablen können zu Herausforderungen bei der Wartung und der Lesbarkeit des Codes führen, insbesondere in größeren Anwendungen.

Alternative Lösung mit localStorage

localStorage bietet einen sichereren und effizienteren Ansatz für die Datenübertragung zwischen Seiten ohne die Notwendigkeit globaler Variablen. Dieser Mechanismus ermöglicht die Speicherung von Schlüssel-Wert-Paaren, die über Seitenneuladevorgänge und Browsersitzungen hinweg bestehen bleiben.

Code-Implementierung

Seite 1:

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

Seite 2:

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

Vorteile von localStorage

• Persistente Speicherung: Die Daten bleiben auch nach dem Schließen und erneuten Öffnen des Browsers zugänglich.
• Enorme Speicherkapazität:Ermöglicht im Gegensatz zu Cookies das Speichern großer Datenmengen.
• Serverseitige Vermeidung:Im Gegensatz zu Cookies werden Daten nicht bei jeder Anfrage an den Server zurückgesendet.

Fazit

Sowohl window.onload als auch localStorage bietet Methoden zum Übertragen von Variablen zwischen Seiten, wobei sich localStorage aufgrund seiner vielfältigen Vorteile und Benutzerfreundlichkeit als bevorzugte Lösung herausstellt. Durch die Nutzung der Leistungsfähigkeit von localStorage können Entwickler Daten effizient seitenübergreifend austauschen, das Benutzererlebnis verbessern und Entwicklungsprozesse rationalisieren.

Das obige ist der detaillierte Inhalt vonSo teilen Sie Daten zwischen HTML-Seiten in JavaScript: Übertragen von Variablen mit window.onload und localStorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!