異なるページ間のJavaScriptデータ転送（URLパラメータ取得）

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページに渡されるという状況によく遭遇します。これはどのように行われるのでしょうか。
今日は実際に試してみましょう。例えば、現在 2 つのページがあります。1 つのページでユーザー情報を入力すると、別のページにジャンプして、xx welcome to login インターフェースが表示されます。

まずはデザインのアイデアを見てみましょう。

• 最初のログインページには送信フォームが含まれており、 action index.htmlページに送信されます。
• 2ページ目は1ページ目のパラメータを使用できるため、異なるページ間でデータを転送する効果が得られます。
• 2 番目のページでは、URL でlocation.searchパラメータを使用しているため、1 番目のページのデータを使用できます。
• 2 ページ目で、このパラメータを抽出する必要があります。
• 最初のステップは、 substrを使用して削除することです。
• 2番目のステップは、split('=')を使用してキーと値を分離することです。
• 最初の配列はキーで、2番目の配列は値です

実装コードは次のとおりです。

<本文>
    <フォームアクション="index.html">
        ユーザー名: <input type="text" name = 'uname'>
        <input type="submit" value="送信">
    </フォーム>
</本文>

<本文>
    <div><span style="font-weight:700; color:blue"></span>ログインへようこそ！ </div>
    <スクリプト>
       var span = document.querySelector('span'); //span タグを取得します var myName = location.search.substr(1); //前のページで入力されたパラメータを取得します var arr = myName.split('='); //= 記号を使用してキーと値を分割します span.innerHTML = arr[1] + '' //データを span に渡します
    </スクリプト>
</本文>

実行効果は次のとおりです。

以上で、異なるページでのJavaScriptデータの送信（URLパラメータ取得）についての記事は終了です。異なるページでのJavaScriptデータの送信についての詳細は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。