javascript page jump pass value

In front-end development, issues such as page jumps and value transfer are often involved. JavaScript is a widely used language that can be used to jump to pages and pass parameters. This article will introduce the methods of JavaScript page jump and value transfer, and provide some application examples.

1. JavaScript method to implement page jump

1. window.location.href

window.location.href is used to load a new page . Through this method, you can jump to the specified page on the current page. For example, the following code can jump to the page designated as "newpage.html" on the current page:

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

Ongoing page While jumping, you can also pass parameters to the new page. For example:

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

2. window.location.replace

another One way to implement page jumps is to use window.location.replace. The function of this method is to replace the current page with a new page. For example, the following code will be replaced by the page specified as "newpage.html" on the current page:

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

For this In terms of methods, parameters cannot be passed while jumping to the page.

3. window.open

window.open allows opening a specified web page in a new browser window. For example, the following code will open a page specified as "newpage.html" in a new window:

window.open("newpage.html");

Similarly, Parameters can also be passed through this method. For example:

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

2. JavaScript page parameter passing method

1. URL passing Parameter

URL parameter passing is a simple and easy-to-use method for page parameter passing. It passes the parameters to the new page as parameters in the URL. For example:

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

In the new page, you can use the URLSearchParams object in JavaScript to get the parameters in the URL. For example:

//Get the parameters in the URL
const searchParams = new URLSearchParams(window.location.search);

//Get the username
const username = searchParams. get('username');

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

2. sessionStorage

sessionStorage is a Web storage solution provided by HTML5. It is similar to localStorage, but the data stored is session level, and the data will be cleared when the session ends. You can use sessionStorage to pass data between pages. For example, set the passed parameters in the previous page:

//Set the passed parameters
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age' , 20);

In the latter page, you can get the passed parameters through sessionStorage:

//Get the passed parameters
const username = sessionStorage.getItem('username') ;
const age = sessionStorage.getItem('age');

3. localStorage

localStorage is also a Web storage solution provided by HTML5. Different from sessionStorage, The data stored in localStorage is permanent and will not be cleared even if the page or browser is closed. You can use localStorage to pass data between pages. For example, set the passed parameters in the previous page:

//Set the passed parameters
localStorage.setItem('username', 'Tom');
localStorage.setItem('age' , 20);

In the latter page, you can get the passed parameters through localStorage:

//Get the passed parameters
const username = localStorage.getItem('username') ;
const age = localStorage.getItem('age');

3. Application Example

The following is a practical application example to implement a page jump containing a form, and Pass the data from the form to the next page.

1. Page one (index.html)

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

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

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<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>  

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

2. Page Two (pageTwo.html)

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

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

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<div>  
    <p>用户名:</p>  
    <p id="username"></p>  
</div>  
<div>  
    <p>密码：</p>  
    <p id="password"></p>  
</div>  
<script>  
    /** 
      * 获取 URL 参数 
      */  
    function getSearchParams() {  
        const searchParams = new URLSearchParams(window.location.search);  
        const username = searchParams.get('username');  
        const password = searchParams.get('password');  
        document.getElementById("username").innerText = username;    
        document.getElementById("password").innerText = password;    
    }  
    getSearchParams();  
</script>  

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

In page one, when the submit button is clicked, the submitForm method will be executed to splice the data in the form into one parameter and Passed to page two. In page two, the URL parameters will be obtained through the getSearchParams method and displayed on the page.

Summary

This article introduces the methods of JavaScript page jump and value transfer, and provides some application examples to help readers better understand and master these technologies. In actual development, appropriate methods should be selected according to the situation to make page jumps and value transfers simpler, more efficient, and safer.

The above is the detailed content of javascript page jump pass value. For more information, please follow other related articles on the PHP Chinese website!