valeur de réussite du saut de page javascript

Dans le développement front-end, des problèmes tels que les sauts de page et le transfert de valeur sont souvent impliqués. JavaScript est un langage largement utilisé qui peut être utilisé pour accéder à des pages et transmettre des paramètres. Cet article présentera les méthodes de saut de page JavaScript et de transfert de valeur, et fournira quelques exemples d'application.

1. Comment implémenter le saut de page à l'aide de JavaScript

1. window.location.href

window.location.href est utilisé pour charger une nouvelle page. Grâce à cette méthode, vous pouvez accéder à la page spécifiée sur la page actuelle. Par exemple, le code suivant peut accéder à la page désignée comme "newpage.html" sur la page actuelle :

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

En sautant vers la page, vous pouvez également accéder à La nouvelle page passe des paramètres. Par exemple :

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

2. window.location.replace

Une autre façon d'implémenter le saut de page consiste à utiliser window.location.replace. La fonction de cette méthode est de remplacer la page actuelle par une nouvelle page. Par exemple, le code suivant sera remplacé par la page spécifiée comme "newpage.html" sur la page actuelle :

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

Pour cette méthode, le saut de page est Paramètres ne peut pas être transmis lors du transfert.

3. window.open

window.open permet d'ouvrir une page Web spécifiée dans une nouvelle fenêtre de navigateur. Par exemple, le code suivant ouvrira une page spécifiée comme "newpage.html" dans une nouvelle fenêtre :

window.open("newpage.html");

De même, les paramètres peuvent également être transmis via cette méthode. Par exemple :

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

2. Méthode de transmission des paramètres de page JavaScript

1. Transmission des paramètres d'URL

La transmission des paramètres d'URL est une façon de réaliser les paramètres de page passage Une méthode facile à utiliser qui transmet les paramètres à une nouvelle page en tant que paramètres dans l'URL. Par exemple :

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

Dans la nouvelle page, vous pouvez utiliser l'objet URLSearchParams en JavaScript pour obtenir les paramètres dans l'URL. Par exemple :

//Obtenir les paramètres dans l'URL
const searchParams = new URLSearchParams(window.location.search);

//Obtenir le nom d'utilisateur
const username = searchParams.get('username');

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

2. sessionStorage

sessionStorage est une solution de stockage Web fournie par HTML5. Elle est similaire à localStorage, mais les données stockées sont au niveau de la session. se termine, les données seront claires. Vous pouvez utiliser sessionStorage pour transmettre des données entre les pages. Par exemple, définissez les paramètres transmis dans la page précédente :

//Définissez les paramètres transmis
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);

After In une page, vous pouvez obtenir les paramètres transmis via sessionStorage :

//Obtenir les paramètres transmis
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');

3. localStorage est également une solution de stockage Web fournie par HTML5. Contrairement à sessionStorage, localStorage stocke les données en permanence et ne sera pas effacé même si la page ou le navigateur est fermé. Vous pouvez utiliser localStorage pour transmettre des données entre les pages. Par exemple, définissez les paramètres transmis dans la page précédente :

//Définissez les paramètres transmis

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

localStorage.setItem('age', 20);

after In une page, vous pouvez obtenir les paramètres transmis via localStorage :

//Obtenir les paramètres transmis

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

const age = localStorage.getItem('age'); Exemple d'application

Ce qui suit est un exemple d'application pratique pour implémenter un saut de page contenant un formulaire et transmettre les données du formulaire à la page suivante.

Page un (index.html)

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1
1. 93f0f5c25f18dab9d176bd4f6de5d30e

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

9c3bca370b5104690d9ef395f2c5f8d1 /corps&g t ;

73a6ac4ed44ffec12cee46588e518a5e

pageTwo.html

8b05045a5be5764f313ed5b9168a17e6

93f0f5c25f18dab9d176bd4f6de5d30e

<form>  
    <div>  
        <label for="username">用户名：</label>  
        <input type="text" id="username" name="username">  
    </div>  
    <div>  
        <label for="password">密码：</label>  
        <input type="password" id="password" name="password">  
    </div> 
    <button type="submit" onclick="submitForm()">跳转到页面二</button> 
</form>  
<script>  
    /** 
      * 提交表单，跳转到页面二 
      */  
    function submitForm() {  
        const username = document.getElementById("username").value;  
        const password = document.getElementById("password").value;  
        const params = `username=${username}&password=${password}`;  
        window.location.href = `pageTwo.html?${params}`;  
    }  
</script>  

9c3bca370b5104690d9ef395f2c5f8d1

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

2. 0785754a6ebbc2ca427a6344e1fab4e1
73a6ac4ed44ffec12cee46588e518a5e

Dans la première page, lorsque vous cliquez sur le bouton Soumettre, la méthode submitForm sera exécutée et les données du formulaire seront fusionnées dans un paramètre et transmises à la page deux. Dans la deuxième page, les paramètres d'URL sont obtenus via la méthode getSearchParams et affichés sur la page.

Résumé

Cet article présente les méthodes de saut de page et de transfert de valeur JavaScript, et fournit quelques exemples d'application pour aider les lecteurs à mieux comprendre et maîtriser ces technologies. Dans le développement réel, les méthodes appropriées doivent être sélectionnées en fonction de la situation pour rendre les sauts de page et les transferts de valeurs plus simples, plus efficaces et plus sûrs.

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!