javascript 頁面跳轉 傳值

在前端開發中，常常會牽涉到頁面跳躍和傳值的問題。其中 JavaScript 是一種廣泛應用的語言，可以透過其實現頁面跳躍並傳遞參數的功能。本文將介紹 JavaScript 頁面跳轉和傳值的方法，並提供一些應用實例。

一、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");

二、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');

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

2. 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');

3. #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');

三、應用程式實例

以下是一個實際應用的例子，實作一個包含表單的頁面跳轉，並將表單中的資料傳遞到下一個頁面。

1. 頁面一（index.html）

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

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

2. 頁面二（pageTwo.html）

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

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

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d##

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

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
rrreee

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

#在頁面一中，當點擊提交按鈕時，會執行submitForm 方法，將表單中的資料拼接成一個參數並傳遞到頁面二。在頁面二中，會透過 getSearchParams 方法取得 URL 參數並顯示在頁面上。

總結

###本文介紹了 JavaScript 頁面跳轉和傳值的方法，並提供了一些應用實例，旨在幫助讀者更好地理解並掌握這些技術。在實際開發中，應根據情況選擇合適的方法，使得頁面跳轉和傳值更加簡單、有效率、安全。 ###

以上是javascript 頁面跳轉 傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！