Javascript-Seitensprung-Pass-Wert

Bei der Frontend-Entwicklung sind häufig Probleme wie Seitensprünge und Wertetransfer beteiligt. JavaScript ist eine weit verbreitete Sprache, mit der man zu Seiten springen und Parameter übergeben kann. In diesem Artikel werden die Methoden des JavaScript-Seitensprungs und der Wertübertragung vorgestellt und einige Anwendungsbeispiele bereitgestellt.

1. So implementieren Sie einen Seitensprung mit JavaScript

1. window.location.href

window.location.href wird zum Laden einer neuen Seite verwendet. Mit dieser Methode können Sie auf der aktuellen Seite zur angegebenen Seite springen. Beispielsweise kann der folgende Code zu der Seite mit der Bezeichnung „newpage.html“ auf der aktuellen Seite springen:

window.location.href = "newpage.html";

Während Sie zur Seite springen, können Sie auch zu springen Die neue Seite übergibt Parameter. Zum Beispiel:

window.location.href = "newpage.html?username=Tom&age=20";

2. window.location.replace

Eine andere Möglichkeit, einen Seitensprung zu implementieren, ist die Verwendung von window.location.replace. Die Funktion dieser Methode besteht darin, die aktuelle Seite durch eine neue Seite zu ersetzen. Beispielsweise wird der folgende Code durch die Seite ersetzt, die auf der aktuellen Seite als „newpage.html“ angegeben ist:

window.location.replace("newpage.html");

Bei dieser Methode ist der Seitensprung Parameter kann beim Übertragen nicht bestanden werden.

3. window.open

window.open ermöglicht das Öffnen einer bestimmten Webseite in einem neuen Browserfenster. Der folgende Code öffnet beispielsweise eine als „newpage.html“ angegebene Seite in einem neuen Fenster:

window.open("newpage.html");

Ähnlich können auch Parameter über diese Methode übergeben werden. Zum Beispiel:

window.open("newpage.html?username=Tom&age=20");

2. JavaScript-Seitenparameterübergabemethode

1. URL-Parameterübergabe

Die URL-Parameterübergabe ist eine Möglichkeit, Seitenparameter zu realisieren Übergabe Eine benutzerfreundliche Methode, die Parameter als Parameter in der URL an eine neue Seite übergibt. Zum Beispiel:

window.location.href = "newpage.html?username=Tom&age=20";

Auf der neuen Seite können Sie das URLSearchParams-Objekt in JavaScript verwenden, um die Parameter in der URL abzurufen. Zum Beispiel:

//Rufen Sie die Parameter in der URL ab
const searchParams = new URLSearchParams(window.location.search);

//Rufen Sie den Benutzernamen ab
const username = searchParams.get('username');

/ /Get Age
const age = searchParams.get('age');

2. sessionStorage

sessionStorage ist eine von HTML5 bereitgestellte Webspeicherlösung, die jedoch auf Sitzungsebene gespeichert wird endet, werden die Daten gelöscht. Sie können sessionStorage verwenden, um Daten zwischen Seiten zu übertragen. Legen Sie beispielsweise die übergebenen Parameter auf der vorherigen Seite fest:

//Stellen Sie die übergebenen Parameter ein
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);

after In Auf einer Seite können Sie die übergebenen Parameter über sessionStorage abrufen:

// Holen Sie sich die übergebenen Parameter
const username = sessionStorage.getItem('username');

localStorage

localStorage ist auch eine von HTML5 bereitgestellte Webspeicherlösung. Im Gegensatz zu sessionStorage speichert localStorage Daten dauerhaft und wird auch dann nicht gelöscht, wenn die Seite oder der Browser geschlossen wird. Sie können localStorage verwenden, um Daten zwischen Seiten zu übertragen. Legen Sie beispielsweise die übergebenen Parameter auf der vorherigen Seite fest:

// Legen Sie die übergebenen Parameter fest

localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);

after In Auf einer Seite können Sie die übergebenen Parameter über localStorage abrufen:

//Holen Sie sich die übergebenen Parameter

const username = localStorage.getItem('username');
const age = localStorage.getItem('age'); Anwendungsbeispiel

Im Folgenden finden Sie ein praktisches Anwendungsbeispiel, um einen Seitensprung zu implementieren, der ein Formular enthält, und die Daten im Formular auf die nächste Seite zu übertragen.

Seite eins (index.html)

1. 8b05045a5be5764f313ed5b9168a17e6
93f0f5c25f18dab9d176bd4f6de5d30e

<meta charset="UTF-8">  
<title>页面一</title>  

28101e5d3b000c08ef761532f9c16b00

pageTwo.html8b05045a5be5764f313ed5b9168a17e6
93f0f5c25f18dab9d176bd4f6de5d30e

6c04bd5ca3fcae76e30b72ad730ca86d reee

0785754a6ebbc2ca427a6344e1fab4e1
73a6ac4ed44ffec12cee46588e518a5e

Wenn auf Seite eins auf die Schaltfläche „Senden“ geklickt wird, wird die Methode „submitForm“ ausgeführt und die Daten im Formular werden in einen Parameter gespleißt und an Seite zwei übergeben. Auf Seite zwei werden die URL-Parameter über die Methode getSearchParams abgerufen und auf der Seite angezeigt.
2. Zusammenfassung

Dieser Artikel stellt JavaScript-Seitensprung- und Wertübertragungsmethoden vor und bietet einige Anwendungsbeispiele, um den Lesern zu helfen, diese Technologien besser zu verstehen und zu beherrschen. In der tatsächlichen Entwicklung sollten je nach Situation geeignete Methoden ausgewählt werden, um Seitensprünge und Wertübertragungen einfacher, effizienter und sicherer zu machen.

Das obige ist der detaillierte Inhalt vonJavascript-Seitensprung-Pass-Wert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!