30

自動保存機能を実装した、最適な JavaScript ライブラリ、ライブラリのプラグインまたは拡張機能は何ですか?

具体的に必要なのは、データ グリッドを「保存」できることです。gmail と Google Documents の自動保存を考えてみてください。

車輪がすでに発明されている場合、車輪を再発明したくありません。魔法の autoSave() 関数の既存の実装を探しています。

自動保存: 永続ストレージ (通常は DB) に保存するサーバー コードへのプッシュ。サーバー コード フレームワークは、この質問の範囲外です。

私は Ajax ライブラリを探しているのではなく、より高いレベルのライブラリ/フレームワークを探していることに注意してください: フォーム自体と対話します。

daemach は、jQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [スクリプト ホスト ダウン]の上に実装を導入しました。ただし、軽量でよく設計された基準を満たしているとは確信していません。

基準

  • 安定性、軽量、優れた設計
  • onChange および/または onBlur を保存します
  • 指定されたミリ秒数よりも頻繁に保存することはありません
  • 同時に発生する複数の更新を処理する
  • 最後の保存以降に変更が発生していない場合は保存しません
  • 入力クラスごとに異なる URL に保存します
4

8 に答える 8

50

自動保存は非常に簡単に実装でき、jquery や mootools などの主要なフレームワークの 1 つを使用できます。ユーザーが自動保存する必要があるものを編集したら、 window.setTimeout() を使用し、そのタイムアウトで javascript フレームワークの標準 AJAX を呼び出すだけです。

例 (jquery を使用):

var autosaveOn = false;
function myAutosavedTextbox_onTextChanged()
{
    if (!autosaveOn)
    {
        autosaveOn = true;

        $('#myAutosavedTextbox').everyTime("300000", function(){
             $.ajax({
                 type: "POST",
                 url: "autosavecallbackurl",
                 data: "id=1",
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
             });
        }); //closing tag
    }
}
于 2009-05-31T04:43:15.503 に答える
21

この質問が古いことは承知していますが、私が最も気に入っているコードを含めたいと思います。ここで見つけました： http://codetunnel.io/how-to-implement-autosave-in-your-web-app/

コードは次のとおりです。

var $status = $('#status'),
    $commentBox = $('#commentBox'),
    timeoutId;

$commentBox.keypress(function () { // or keyup to detect backspaces
    $status.attr('class', 'pending').text('changes pending');

    // If a timer was already started, clear it.
    if (timeoutId) clearTimeout(timeoutId);

    // Set timer that will save comment when it fires.
    timeoutId = setTimeout(function () {
        // Make ajax call to save data.
        $status.attr('class', 'saved').text('changes saved');
    }, 750);
});

ユーザーが 750 ミリ秒を超えて書き込みを停止すると、保存されます。

また、変更が保存されたかどうかをユーザーに知らせるステータスもあります

于 2016-05-05T16:26:29.923 に答える
4

タイムアウトを使用して設定した時間を節約することもできますが、データが変更されたときに一定時間内に保存していない場合は、onchange イベント ハンドラーを使用することをお勧めします。保存しますが、キーストロークごとに保存しないでください。

したがって、ajax 関数を呼び出す前に、最後にいつ保存したかを確認します。

これにより、必要なときにのみ保存できますが、あらかじめ決められたレートで保存できます。したがって、5 分ごとに保存する場合は、どのような変更が行われたかに関係なく、その 5 分間のウィンドウ内で変更が行われた場合は保存します。

ajax 呼び出しを行うのは簡単ですが、jQuery を使用すると簡単にできます。残念ながら、私が見てきたことから、あなたが望むものを得るには、独自の機能を実装する必要があります. 特定のフィールドだけが変更された場合、さまざまな人が保存したい場合があるため、一般的な方法で行うことは困難です。そのため、選択ボックスをクリックしたからといって、保存機能につながらない場合がありますが、テキスト ボックス内の何かを変更すると、機能が保存される場合があります。

于 2009-05-31T04:48:58.693 に答える
1

Cookie のフォーム フィールドの単純な自動保存には、この優れたプラグインを使用しますhttp://rikrikrik.com/jquery/autosave/ サーバーにデータを送信しませんが、より良いものが見つからない場合は、アップグレードする方が簡単ですゼロから行うよりも機能的に。

于 2012-04-05T18:49:57.867 に答える
0

x秒ごとに起動するタイマーが必要なだけではありませんか？コールバック関数は、「autosave=true」フィールドが追加されたフォームのサーバーにAJAXポストバックを実行します。サーバーでこのポストバックを処理するだけで完了です。

于 2009-06-01T04:05:04.613 に答える
0

jQueryを使用することをお勧めします。もちろん、「保存」の部分はバックエンドで行う必要がありますが、jQuery を使用すると、AJAX リクエストの送信が簡単になります。

ASP.NET バックエンドがある場合は、単に WebMethod を呼び出して、関連する文字列 (テキスト ボックスの内容など) を指定された間隔で送信できます。

[WebMethod]
public void AutoSave(String autoSaveContent)
{
 // Save
}

このメソッドを呼び出す jQuery リクエストは次のようになります。

$.ajax({  
type: "POST",  
contentType: "application/json; charset=utf-8",  
url: "AutoSaveService.asmx/AutoSave", 
data: "{textBoxToAutosaveText}",  
dataType: "json"
});

それで全部です。jQuery はhttp://jquery.com/にあります。

于 2009-05-31T04:37:12.170 に答える
0

シンプルで軽量なものをお探しなら、JavaScript の組み込みsetTimeout()関数を使用するのが最も軽量だと思います。選択した AJAX フレームワークと組み合わせて使用​​すれば、準備完了です。

function autoSave()
{
  $.get(URL, DATA); // Use any AJAX code here for the actual autosaving. This is lightweight jQuery.
  setTimeout("autoSave()", 60000); // Autosaves every minute.
}
autoSave(); // Initiate the auto-saving.
于 2009-05-31T04:40:37.720 に答える
0

synchronizeは、HTML ページに機能を追加して、定期的にユーザー入力をサーバーに自動的に送り返すjquery プラグインです。(ソースコード)

JavaScript と HTML のサンプル:

<script>
  $("input").synchronize();
</script>

<input type="text" value="initial_value" 
       class="{url:'/entity.cfc?method=updateDescription',data:{ID1:'1',ID2:'2'}}" />

デフォルトの 1 秒の遅延後の結果の ajax リクエスト:

http://localhost/entity.cfc?method=updateDescription&value=update_value&preVal=initial_value&ID1=1&ID2=2
于 2009-05-31T04:50:40.063 に答える