在前端開發中，常常會牽涉到頁面跳躍和傳值的問題。其中 JavaScript 是一種廣泛應用的語言，可以透過其實現頁面跳躍並傳遞參數的功能。本文將介紹 JavaScript 頁面跳轉和傳值的方法，並提供一些應用實例。
一、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");
二、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');
//取得年齡
const age = searchParams.get('age');
#sessionStorage 是HTML5 提供的Web 儲存方案，與localStorage 相似，但是儲存的資料是會話層級的，當會話結束時資料會被清除。可以使用 sessionStorage 在頁面之間傳遞資料。例如，在前一個頁面中設定傳遞的參數：
//設定傳遞的參數
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age' , 20);
在後一個頁面中，可以透過sessionStorage 取得傳遞的參數：
//取得傳遞的參數
const username = sessionStorage.getItem('username') ;
const age = sessionStorage.getItem('age');
localStorage 也是HTML5 提供的Web 儲存方案，與sessionStorage 不同的是， localStorage 儲存資料是永久性的，即使關閉頁面或瀏覽器也不會被清除。可以使用 localStorage 在頁面之間傳遞資料。例如，在前一個頁面中設定傳遞的參數：
//設定傳遞的參數
localStorage.setItem('username', 'Tom');
localStorage.setItem('age' , 20);
在後一個頁面中，可以透過localStorage 取得傳遞的參數：
//取得傳遞的參數
const username = localStorage.getItem('username') ;
const age = localStorage.getItem('age');
三、應用程式實例
以下是一個實際應用的例子，實作一個包含表單的頁面跳轉，並將表單中的資料傳遞到下一個頁面。
<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>
<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> #在頁面一中，當點擊提交按鈕時，會執行submitForm 方法，將表單中的資料拼接成一個參數並傳遞到頁面二。在頁面二中，會透過 getSearchParams 方法取得 URL 參數並顯示在頁面上。
總結
###本文介紹了 JavaScript 頁面跳轉和傳值的方法，並提供了一些應用實例，旨在幫助讀者更好地理解並掌握這些技術。在實際開發中，應根據情況選擇合適的方法，使得頁面跳轉和傳值更加簡單、有效率、安全。 ###以上是javascript 頁面跳轉 傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
