JavaScript でページをロードしてもフォーム データを保持するにはどうすればよいですか?

ページ読み込み間で変数を保持する方法

HTTP はステートレスであるため、ページ更新間のフォーム送信状態をキャプチャするのは困難な場合があります。ページ読み込み間の永続的なストレージは、JavaScript だけを使用して簡単に実現することはできません。

クエリ文字列

GET メソッドを使用してフォームを送信すると、クエリ文字列が作成されます (?parameter=value) ）。フォームの入力フィールドに特定の値を設定することで、クエリ文字列を利用できます。例:

<form method="GET">
    <input type="hidden" name="clicked" value="true" />
    <input type="submit" />
</form>

フォームの送信時に、クリックされたパラメーターを含むようにクエリ文字列が更新されます。ページがリロードされると、クエリ文字列をチェックして、送信ボタンがクリックされたかどうかを判断できます。

Web Storage

HTML5 は Web Storage を提供し、データを保存できます。ページの読み込み全体でブラウザ内で。 LocalStorage はデータを無期限に保存しますが、SessionStorage は現在の閲覧セッション中にのみデータを保存します。この目的には、SessionStorage が適切です。

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

Cookie

Cookie はクライアント側でデータを保存することもできます。 jQuery を使用すると、Cookie を簡単に設定できます:

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', { expires: 1 }); // expires in 1 day
});

Window.name

ハック的なアプローチとして、データを window.name プロパティに保存できます:

window.name = JSON.stringify({ clicked: true });

このアプローチは現在のタブに制限されており、文字列のみを保存します。

以上がJavaScript でページをロードしてもフォーム データを保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。