JavaScript でページを変更するときに URL の状態を保存するにはどうすればよいですか?

JavaScript でページを変更する際に URL の状態を保持する

JavaScript では、ページ全体のリロードをトリガーせずにブラウザの URL を変更できます。ブラウザの履歴 API またはフラグメント識別子を利用する

履歴 API の使用 (最新のブラウザ)

履歴 API をサポートするブラウザの場合、history.pushState を使用して、ページのコンテンツに影響を与えることなく URL を更新できます。 :

history.pushState({}, '', 'new-url');

ユーザーが戻るボタンをクリックしたときに元の URL を復元するには、次を使用します。 History.popState:

window.addEventListener('popstate', function() {
  // Restore original URL and content
});

フラグメント識別子メソッドの使用 (レガシー ブラウザ)

履歴 API をサポートしていないブラウザでは、ウィンドウを使用できます。 URL フラグメントに状態情報を保存する location.hash プロパティ:

window.location.hash = '#state-information';

状態を処理するには変更を確認するには、hashchange イベントをリッスンするか、setInterval を使用してハッシュ値を定期的に確認します:

window.addEventListener('hashchange', function() {
  // Update page based on new hash
});

考慮事項

• フラグメントを使用する場合は、要素 ID との競合を回避します。
• 状態情報が、識別子メソッドに含めるために適切にエンコードされていることを確認します。 URL。
• jQuery を使用している場合、hashchange プラグインはハッシュベースの状態管理を簡素化できます。

以上がJavaScript でページを変更するときに URL の状態を保存するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。