JavaScriptのページジャンプパス値

フロントエンド開発では、ページジャンプや値の転送などの問題が関係することがよくあります。 JavaScript は、ページにジャンプしたりパラメータを渡したりするために使用できる、広く使用されている言語です。この記事では、JavaScript のページジャンプと値の転送の方法を紹介し、いくつかの応用例を示します。

1. ページジャンプを実装する 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

ページ ジャンプを実装する 1 つの方法は、window.location.replace を使用することです。このメソッドの機能は、現在のページを新しいページに置き換えることです。たとえば、次のコードは、現在のページで「newpage.html」として指定されたページに置き換えられます。

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

For this メソッドに関しては、ページにジャンプするときにパラメータを渡すことはできません。

3. window.open

window.open を使用すると、指定した Web ページを新しいブラウザ ウィンドウで開くことができます。たとえば、次のコードは、「newpage.html」として指定されたページを新しいウィンドウで開きます。

window.open("newpage.html");

同様に、パラメータでも次のことができます。このメソッドを介して渡されます。例:

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

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

//Get age
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 ストレージ ソリューションです。 localStorage に保存されたデータは永続的であり、ページまたはブラウザを閉じても消去されません。 localStorage を使用して、ページ間でデータを渡すことができます。たとえば、前のページで渡されたパラメータを設定します。

//渡されたパラメータを設定します
localStorage.setItem('username', 'Tom');
localStorage.setItem('age' , 20);

後のページでは、localStorage を通じて渡されたパラメータを取得できます:

//渡されたパラメータを取得します
const username = localStorage.getItem('username') ;
const age = localStorage.getItem('age');

3. アプリケーション例

次は、フォームを含むページ ジャンプを実装する実際的なアプリケーション例です。フォームから次のページへのデータ。

1. ページ 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. ページ 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>  

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

ページ 1 で、送信ボタンをクリックすると、submitForm メソッドが実行され、フォーム内のデータが 1 つに結合されます。パラメータを指定し、ページ 2 に渡されます。ページ 2 では、getSearchParams メソッドを通じて URL パラメーターが取得され、ページに表示されます。

概要

この記事では、JavaScript のページ ジャンプと値の転送の方法を紹介し、読者がこれらのテクノロジをより深く理解し習得できるようにいくつかのアプリケーション例を示します。実際の開発では、ページジャンプや値の転送をより簡単、効率的、安全に行うために、状況に応じて適切な方法を選択する必要があります。

以上がJavaScriptのページジャンプパス値の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。