2012-02-23 7 views
3

ユーザーがフォームに記入している間に何らかの理由でWebページが更新されることがあります。望ましくない効果は、ユーザによって既に入力されたデータを消去することである。ページの更新時にフォームデータを保存する

ページの更新時にフォームデータを保持するソリューションはありますか?

フォームにはテキストの入力と選択が含まれます。

答えて

1

あなたは"I have a situation where for some reason a Web page might refresh"と言っていますが、ユーザーがページを更新する可能性がありますか、ページを更新する他のスクリプトですか?ケースが後者の場合は、フォームデータを保存するのではなく、リフレッシュの原因となる問題を修正することをお勧めします。それが前者の場合は、おそらくJavaScriptがあなたのための解決策になります。

いずれのフォーム要素でもすべてのkeyupイベントを聴くことができます。 keyupイベントが発生すると、最新のデータを保持するために、フォームデータをシリアル化してクッキー(またはサポートする必要のあるブラウザに応じてWebストレージ)に書き込みます。ページがリロードされた場合、またはユーザーがページを離れて戻った場合は、ドキュメントの準備ができた状態でデシリアライズし、フォームにCookieのデータを再入力できます。フォームを投稿するときは、次回ユーザーがページを読み込んだときにフォームが満たされていないことを確認するために、クッキーもクリアするようにしてください。ここで

更新

は、直列化のためにJavaScriptを使用して直列化復元をGSerializerを使用する方法について良いblog postです。ユーザーがフォームに記入されているよう

+0

ありがとうございます。シリアライズのためにjQueryを使用することはできますが、デシリアライズはどのように機能しますか?そのための機能はありますか、または最初からスクリプトを書く必要がありますか? – Christophe

+0

ページの更新はユーザーの制御下にありません。その目的はページの内容を更新することです(ajaxはありません)。 – Christophe

+0

@Christophe JavaScriptを使ったシリアライズ/デシリアライゼーションに関するいくつかの情報で私の答えを更新しました。 –

1

Aはアプローチ

  1. を示唆し、JavaScriptのLocalStorageに入力された値をキャッシュランニング、クッキー、又はAJAXを介してセッション変数を有します。

  2. ページの読み込み時に、これらのエントリが存在するかどうかを確認し、JavaScriptでフォームに入力します。

  3. フォーム送信時に、エントリをクリアします。

0

HTML5ウェブストレージを使用すると、クッキーよりも高速で安全です。 W3Schoolsのウェブサイトでいくつかの素早く簡単なサンプルをチェックすることができます:http://www.w3schools.com/html5/html5_webstorage.asp

関連する問題