javascript怎么實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳值

發(fā)布時(shí)間：2023-05-16 16:23:32 來源：億速云閱讀：109 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“javascript怎么實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳值”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、JavaScript 實(shí)現(xiàn)頁面跳轉(zhuǎn)的方法

window.location.href

window.location.href 的作用是加載新的頁面。通過這個(gè)方法，可以在當(dāng)前頁面跳轉(zhuǎn)到指定的頁面。例如，下面的代碼可以在當(dāng)前頁面跳轉(zhuǎn)到被指定為 “newpage.html” 的頁面：

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

在進(jìn)行頁面跳轉(zhuǎn)的同時(shí)，也可以向新頁面?zhèn)鬟f參數(shù)。例如：

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

window.location.replace

另一種實(shí)現(xiàn)頁面跳轉(zhuǎn)的方法是使用 window.location.replace。這個(gè)方法的作用是用新的頁面替換當(dāng)前頁面。例如，下面的代碼將會(huì)在當(dāng)前頁面被指定為 “newpage.html” 的頁面所替換：

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

對(duì)于這個(gè)方法而言，在進(jìn)行頁面跳轉(zhuǎn)的同時(shí)是不能傳遞參數(shù)的。

window.open

window.open 允許以新的瀏覽器窗口方式打開一個(gè)指定的網(wǎng)頁。例如，下面的代碼將會(huì)在新的窗口中打開一個(gè)指定為 “newpage.html” 的頁面：

window.open("newpage.html");

同樣的，通過這個(gè)方法同樣可以傳遞參數(shù)。例如：

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

二、JavaScript 頁面?zhèn)鲄⒌姆椒?/p>

URL 傳參數(shù)

URL 傳參數(shù)是實(shí)現(xiàn)頁面?zhèn)鲄⒌囊环N簡單易用的方法，它將參數(shù)作為 URL 中的參數(shù)傳遞給新頁面。例如：

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

在新頁面中，可以使用 JavaScript 中的 URLSearchParams 對(duì)象獲取 URL 中的參數(shù)。例如：

//獲取 URL 中的參數(shù)
const searchParams = new URLSearchParams(window.location.search);

//獲取用戶名
const username = searchParams.get('username');

//獲取年齡
const age = searchParams.get('age');

sessionStorage

sessionStorage 是 HTML5 提供的 Web 存儲(chǔ)方案，與 localStorage 相似，但是存儲(chǔ)的數(shù)據(jù)是會(huì)話級(jí)別的，當(dāng)會(huì)話結(jié)束時(shí)數(shù)據(jù)會(huì)被清除?？梢允褂?sessionStorage 在頁面之間傳遞數(shù)據(jù)。例如，在前一個(gè)頁面中設(shè)置傳遞的參數(shù)：

//設(shè)置傳遞的參數(shù)
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);

在后一個(gè)頁面中，可以通過 sessionStorage 獲取傳遞的參數(shù)：

//獲取傳遞的參數(shù)
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');

localStorage

localStorage 也是 HTML5 提供的 Web 存儲(chǔ)方案，與 sessionStorage 不同的是，localStorage 存儲(chǔ)數(shù)據(jù)是永久性的，即使關(guān)閉頁面或?yàn)g覽器也不會(huì)被清除?？梢允褂?localStorage 在頁面之間傳遞數(shù)據(jù)。例如，在前一個(gè)頁面中設(shè)置傳遞的參數(shù)：

//設(shè)置傳遞的參數(shù)
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);

在后一個(gè)頁面中，可以通過 localStorage 獲取傳遞的參數(shù)：

//獲取傳遞的參數(shù)
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

三、應(yīng)用實(shí)例

下面是一個(gè)實(shí)際應(yīng)用的例子，實(shí)現(xiàn)一個(gè)包含表單的頁面跳轉(zhuǎn)，并將表單中的數(shù)據(jù)傳遞到下一個(gè)頁面。

頁面一（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()">跳轉(zhuǎn)到頁面二</button> 
</form>  
<script>  
    /** 
      * 提交表單，跳轉(zhuǎn)到頁面二 
      */  
    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 參數(shù) 
      */  
    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>

在頁面一中，當(dāng)點(diǎn)擊提交按鈕時(shí)，會(huì)執(zhí)行 submitForm 方法，將表單中的數(shù)據(jù)拼接成一個(gè)參數(shù)并傳遞到頁面二中。在頁面二中，會(huì)通過 getSearchParams 方法獲取 URL 參數(shù)并顯示在頁面上。

“javascript怎么實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳值”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

javascript怎么實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽