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)

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

2. ページ 2 (pageTwo.html)

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

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

概要

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

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