溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“javascript怎么實現頁面跳轉和傳值”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
一、JavaScript 實現頁面跳轉的方法
window.location.href
window.location.href 的作用是加載新的頁面。通過這個方法，可以在當前頁面跳轉到指定的頁面。例如，下面的代碼可以在當前頁面跳轉到被指定為 “newpage.html” 的頁面：
window.location.href = "newpage.html";
在進行頁面跳轉的同時，也可以向新頁面傳遞參數。例如：
window.location.href = "newpage.html?username=Tom&age=20";
window.location.replace
另一種實現頁面跳轉的方法是使用 window.location.replace。這個方法的作用是用新的頁面替換當前頁面。例如，下面的代碼將會在當前頁面被指定為 “newpage.html” 的頁面所替換：
window.location.replace("newpage.html");
對于這個方法而言，在進行頁面跳轉的同時是不能傳遞參數的。
window.open
window.open 允許以新的瀏覽器窗口方式打開一個指定的網頁。例如，下面的代碼將會在新的窗口中打開一個指定為 “newpage.html” 的頁面：
window.open("newpage.html");
同樣的，通過這個方法同樣可以傳遞參數。例如：
window.open("newpage.html?username=Tom&age=20");
二、JavaScript 頁面傳參的方法
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');
//獲取年齡
const age = searchParams.get('age');
sessionStorage
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
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');
三、應用實例
下面是一個實際應用的例子，實現一個包含表單的頁面跳轉，并將表單中的數據傳遞到下一個頁面。
頁面一（index.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>頁面一</title>
</head>
<body>
<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></body>
</html>
頁面二（pageTwo.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>頁面二</title>
</head>
<body>
<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></body>
</html>
在頁面一中，當點擊提交按鈕時，會執行 submitForm 方法，將表單中的數據拼接成一個參數并傳遞到頁面二中。在頁面二中，會通過 getSearchParams 方法獲取 URL 參數并顯示在頁面上。
“javascript怎么實現頁面跳轉和傳值”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
