Web アプリケーションでページをリロードしても変数を保持するにはどうすればよいですか?

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

Web アプリケーションでのユーザー エクスペリエンスを向上させるには、ページの読み込み間でユーザー アクションを追跡することが重要です。ただし、HTTP のステートレスな性質により、このタスクは困難になる可能性があります。

試行とエラー

フォーム送信イベントをキャプチャし、その後非表示を再表示する試みが失敗しました。フィールドが報告されました。 JavaScript コードでは、送信ステータスを保存するためにグローバル変数 (クリック) を使用していましたが、ページの更新時にその値を保持できませんでした。

解決策

この問題を解決するには、実装できる方法はいくつかあります:

1.クエリ文字列

GET メソッドを使用してフォームを送信すると、パラメータと値のペアを含むクエリ文字列で URL が更新されます。これにより、フォームの入力フィールドを特定の値に設定できます。たとえば、隠しフィールドを追加できます:

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

その後のページの読み込み時に、JavaScript を使用してクエリ文字列を解析し、渡された値をチェックできます:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
    var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

2. Web Storage

HTML5 では Web Storage が導入され、ページ読み込み時にブラウザー内でデータを保持するための API が提供されます。 sessionStorage と localStorage の 2 つのオプションが提供されます。

sessionStorage:

• データは現在の閲覧セッション中にのみ保持されます。
• 保存に適していますクリックなどの一時データ

ボタンのクリック時に sessionStorage を設定するコード:

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

ページの読み込み時に sessionStorage が設定されているかどうかを確認するコード:

var clicked = sessionStorage.getItem('clicked');

localStorage:

• データ(ユーザーが手動でクリアしない限り) 無期限に存続します。
• 単一の閲覧セッションを超えてデータを保存する場合に役立ちます。

ボタンのクリック時に localStorage を設定するコード:

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

ページに localStorage が設定されているかどうかを確認するコードロード:

var clicked = localStorage.getItem('clicked');

3. Cookie

Cookie は、永続的なデータ ストレージのための別のメカニズムを提供します。 Web Storage とは異なり、Cookie は主にサーバー側の通信用に設計されていますが、クライアント側のデータ保持にも使用できます。

jQuery は Cookie の処理を​​簡素化します:

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

読み取るコードページ読み込み時の Cookie:

var clicked = $.cookie('clicked');

Cookie を削除するには、$.cookie('clicked', null).

4. window.name

やや型破りではありますが、window.name プロパティを使用してページを更新してもデータを保存できます:

window.name = "my value";

文字列またはシリアル化されたオブジェクトを保存できます:

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

ただし、このアプローチには限界があります。タブやドメインを越えてアクセスできますが、同じブラウジング セッション内でのみアクセスできます。通常、重要なデータを永続化することはお勧めできません。

以上がWeb アプリケーションでページをリロードしても変数を保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。