問題は何ですか？

退屈なフォームに長い間記入しているとき、または雄弁で熱烈なコメントを書いているときに*突然*ブラウザがクラッシュした場合がありますか？ または、作業中のタブを閉じましたか、それとも電源がオフになりましたか（そして、UPSは、よく知られた法律によればオフではありません）？ そうでない場合、あなたは幸運ですが、誰もそのような事件に対する保険を持っていません。

入力されたすべてのデータを失ったばかりのユーザーが経験した感情の嵐を想像してください。結局、少し印刷してフォームを送信しました。 さて、このデータを復元する方法があり、Sisypheanの労働に従事しない場合にのみ...


ちなみに、これはフォーラムへの投稿やHabrに関する記事にも当てはまります。 定期的に保存するテキストファイルに長いテキストを入力する方法は非常に一般的であり、その後リソースにコピーアンドペーストします。 定期的に下書きを保存できますが、すべてのフォーラムにこの機能があるわけではなく、あまり便利ではありません。 Googleは下書きの自動保存に最適です-自分宛てに書き込み、すべての情報が保存され、ボタンを押す必要さえありません。

どうする

Googleのような下書きの保存を実装することはより困難な作業であり、普遍的な方法ではありません。 ソリューションをシンプルで再利用できるものにしたかったのですが、この場合、サーバー側の魔術を排除できます。

その結果、ローカルストレージブラウザーでフォームに入力されたデータを保存できるシンプルなホイッスルが作成され、同じページをリロードするときに（クエリパラメーターが重要です）フォームに入力します。 ローカルストレージ内の特定のフォームのデータは、送信またはリセットされるとクリアされます。

使い方は？

プラグインの目的は1つのみであるため、使用するのは非常に簡単です。データを保存および復元するフォームを選択するだけです。

//      form1  form2 $('#form1, #form2').sisyphus(); //       $('form').sisyphus(); 

更新：
ローカルストレージに保存されるキーに追加のプレフィックスを設定する機能が追加されました。 テキストフィールドデータの保存のタイムアウト（入力：textおよびtextarea）、フォームデータの保存、復元、リセットのコールバック。
デフォルトのパラメーター：

 { customKeyPrefix: '', timeout: 0, //  ,  0 -     onSaveCallback: function() {}, onRestoreCallback: function() {}, onReleaseDataCallback: function() {} } 

5秒ごとにテキストフィールドを保存します（選択/ラジオボタン/チェックボックスは変更ごとに保存されます）：

 $('form').sisyphus({timeout: 5}); 

アップデート2：
IE 8+のサポートが追加されました。

デモソース 。