자바스크립트 페이지 점프 패스 값

프런트엔드 개발에서는 페이지 점프, 값 전송 등의 문제가 자주 발생합니다. JavaScript는 페이지로 이동하고 매개변수를 전달하는 데 사용할 수 있는 널리 사용되는 언어입니다. 이 기사에서는 JavaScript 페이지 이동 및 값 전송 방법을 소개하고 몇 가지 응용 사례를 제공합니다.

1. JavaScript를 사용하여 페이지 점프를 구현하는 방법

1. window.location.href

window.location.href는 새 페이지를 로드하는 데 사용됩니다. 이 방법을 사용하면 현재 페이지에서 지정된 페이지로 이동할 수 있습니다. 예를 들어 다음 코드는 현재 페이지에서 "newpage.html"로 지정된 페이지로 이동할 수 있습니다.

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

페이지로 이동하는 동안 다음 페이지로 이동할 수도 있습니다. 새 페이지는 매개변수를 전달합니다. 예:

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

2. window.location.replace

페이지 이동을 구현하는 또 다른 방법은 window.location.replace를 사용하는 것입니다. 이 메서드의 기능은 현재 페이지를 새 페이지로 바꾸는 것입니다. 예를 들어 다음 코드는 현재 페이지에서 "newpage.html"로 지정된 페이지로 대체됩니다.

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

이 방법의 경우 페이지 점프는 매개변수입니다. 환승 중에는 통과할 수 없습니다.

3. window.open

window.open을 사용하면 지정된 웹 페이지를 새 브라우저 창에서 열 수 있습니다. 예를 들어 다음 코드는 "newpage.html"로 지정된 페이지를 새 창에서 엽니다.

window.open("newpage.html");

마찬가지로 매개변수도 이 메서드를 통해 전달될 수 있습니다. 예:

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

2. JavaScript 페이지 매개변수 전달 방법

1. URL 매개변수 전달

URL 매개변수 전달은 페이지 매개변수를 구현하는 한 가지 방법입니다. 전달 매개변수를 URL의 매개변수로 새 페이지에 전달하는 사용하기 쉬운 방법입니다. 예:

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

새 페이지에서는 JavaScript의 URLSearchParams 개체를 사용하여 URL의 매개변수를 가져올 수 있습니다. 예:

//URL에서 매개변수 가져오기
const searchParams = new URLSearchParams(window.location.search);

//사용자 이름 가져오기
const username = searchParams.get('username');

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

2. sessionStorage

sessionStorage는 HTML5에서 제공하는 웹 저장소 솔루션으로, localStorage와 유사하지만 세션 수준에서 저장됩니다. 종료되면 데이터가 지워집니다. sessionStorage를 사용하여 페이지 간에 데이터를 전달할 수 있습니다. 예를 들어 이전 페이지에서 전달된 매개변수를 설정합니다.

//전달된 매개변수 설정
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);

after In 페이지에서 sessionStorage를 통해 전달된 매개변수를 가져올 수 있습니다.

//전달된 매개변수 가져오기
const username = sessionStorage.getItem('username')
const age = sessionStorage.getItem('age')

3. localStorage

localStorage도 HTML5에서 제공하는 웹 스토리지 솔루션입니다. sessionStorage와 달리 localStorage는 데이터를 영구적으로 저장하며 페이지나 브라우저를 닫아도 지워지지 않습니다. localStorage를 사용하여 페이지 간에 데이터를 전달할 수 있습니다. 예를 들어 이전 페이지에서 전달된 매개변수를 설정합니다.

//전달된 매개변수 설정
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);

after In 페이지에서 localStorage를 통해 전달된 매개변수를 가져올 수 있습니다.

//전달된 매개변수 가져오기
const username = localStorage.getItem('username')
const age = localStorage.getItem('age')

3. 적용 예

다음은 폼이 포함된 페이지 점프를 구현하고 폼에 있는 데이터를 다음 페이지로 전달하는 실제 적용 예입니다.

1. 페이지 1(index.html)

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

42db7d5b27417f2c360743ad1dcae57f

pageTwo.html

d84b43b9fd3921846f7afdeae1f660f6

93f0f5c25f18dab9d176bd4f6de5d30e

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

9c3bca370b5104690d9ef395f2c5f8d1

0785754a6ebbc2ca427a6344e1fab4e1

73a6ac4ed44ffec12cee46588e518a5e

첫 번째 페이지에서 submit 버튼을 클릭하면 submitForm 메소드가 실행되고, 폼에 있는 데이터가 매개변수로 연결되어 두 번째 페이지로 전달됩니다. 두 번째 페이지에서는 getSearchParams 메소드를 통해 URL 매개변수를 가져와서 페이지에 표시합니다.

요약

이 문서에서는 JavaScript 페이지 점프 및 값 전송 방법을 소개하고 독자가 이러한 기술을 더 잘 이해하고 익히는 데 도움이 되는 몇 가지 응용 프로그램 예제를 제공합니다. 실제 개발에서는 상황에 따라 적절한 방법을 선택하여 페이지 점프 및 값 전달을 보다 간단하고 효율적이며 안전하게 수행해야 합니다.

위 내용은 자바스크립트 페이지 점프 패스 값의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!