프런트엔드 개발에서는 페이지 점프, 값 전송 등의 문제가 자주 발생합니다. JavaScript는 페이지로 이동하고 매개변수를 전달하는 데 사용할 수 있는 널리 사용되는 언어입니다. 이 기사에서는 JavaScript 페이지 이동 및 값 전송 방법을 소개하고 몇 가지 응용 사례를 제공합니다.
1. JavaScript를 사용하여 페이지 점프를 구현하는 방법
window.location.href는 새 페이지를 로드하는 데 사용됩니다. 이 방법을 사용하면 현재 페이지에서 지정된 페이지로 이동할 수 있습니다. 예를 들어 다음 코드는 현재 페이지에서 "newpage.html"로 지정된 페이지로 이동할 수 있습니다.
window.location.href = "newpage.html";
페이지로 이동하는 동안 다음 페이지로 이동할 수도 있습니다. 새 페이지는 매개변수를 전달합니다. 예:
window.location.href = "newpage.html?username=Tom&age=20";
페이지 이동을 구현하는 또 다른 방법은 window.location.replace를 사용하는 것입니다. 이 메서드의 기능은 현재 페이지를 새 페이지로 바꾸는 것입니다. 예를 들어 다음 코드는 현재 페이지에서 "newpage.html"로 지정된 페이지로 대체됩니다.
window.location.replace("newpage.html");
이 방법의 경우 페이지 점프는 매개변수입니다. 환승 중에는 통과할 수 없습니다.
window.open을 사용하면 지정된 웹 페이지를 새 브라우저 창에서 열 수 있습니다. 예를 들어 다음 코드는 "newpage.html"로 지정된 페이지를 새 창에서 엽니다.
window.open("newpage.html");
마찬가지로 매개변수도 이 메서드를 통해 전달될 수 있습니다. 예:
window.open("newpage.html?username=Tom&age=20");
2. JavaScript 페이지 매개변수 전달 방법
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');
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')
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. 적용 예
다음은 폼이 포함된 페이지 점프를 구현하고 폼에 있는 데이터를 다음 페이지로 전달하는 실제 적용 예입니다.
<meta charset="UTF-8"> <title>页面一</title>
<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> <meta charset="UTF-8"> <title>页面二</title>