•  06-09-2019
  •  | 
  •  

質問

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

具体的なニーズは、データ グリッドを「保存」できるようにすることです。Gmail と Google ドキュメントの自動保存を考えてください。

すでに発明されている車輪を再発明するつもりはありません。魔法の autoSave() 関数の既存の実装を探しています。

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

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

daemachi は jQuery @ の上に実装を導入しました http://daech.blogspot.de/2007/03/autosave-jquery-plugin.html [スクリプトホストダウン]。ただし、軽量で優れた設計の基準を満たしているかどうかはわかりません。

基準

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

解決

自動保存は実装が非常に簡単であるべき、とあなたはjqueryのかMooToolsのような主要なフレームワークの1つを使用することができます。あなたがする必要があるのは、ユーザーが自動保存されなければならない何かを編集し、そのタイムアウトはJavaScriptのフレームワークの標準的なAJAXのものを呼び出した後window.setTimeoutは（）を使用している。

例えば（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
    }
}

他のヒント

私はこの質問が古いであることを知っているが、私は私が最も好きなコードが含まれるようにしたいと思います。私はここでそれを見つけました： http://codetunnel.io/how-to-implement -autosave・イン・あなたのウェブアプリ/ の

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

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以上のミリ秒の書き込みを停止した後、保存します。

また、ユーザーが変更を保存またはいないされていることを知らせるステータスを持っている。

あなたはタイムアウトを使用することにより、設定した時間を節約することができ、しかし、あなたは一定量の内に保存されていない場合は、データが、変更されたときにように、より良い方法は、ただのonchangeイベントハンドラのいくつかの並べ替えを持っているかもしれ時間、そして節約、しかし、すべてのキーストロークに保存されません。

だから、あなたはAjaxの機能を呼び出す前に、あなたが最後に保存したときに表示することになります。

これは、必要なときにのみ保存することができますが、所定の速度でます。あなたは関係なく、行われたどのような変更のその後、5分ごとに保存したい場合、変更はその5分のウィンドウ内で行われたのであれば、あなたはセーブます。

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

私はこの偉大なプラグイン http://rikrikrik.com/jquery/を使用し、クッキー内のフォームフィールドの簡単な自動保存のために自動保存/ に これは、サーバーにデータを送信しませんが、あなたはより良いものを見つけていない場合、それは最初からそれを行うよりも、funcitonalilyだアップグレードする方が簡単です。

私はあなたがjQueryのを使用することを示唆しています。 「省エネ」の部分はまだもちろん、バックエンドで行う必要がありますが、jQueryのAJAXの提出が風を要求します。

あなたはASP.NETのバックエンドを持っている場合、あなたは、単にWebメソッドを呼び出すと、指定した間隔で関連する文字列（テキストボックスなどの内容）を提出することができます：

[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"
});

それはすべてです。あなたは http://jquery.com/ のではjQueryを見つけることができます。

は、x秒ごとに発射タイマーを必要とするすべてではないですか？コールバック関数が持つフォームのサーバーにAJAXポストバックを行います「自動保存= true」のフィールドが追加されました。ただ、サーバー上でこのポストバックを処理し、あなたが行われています。

同期の<のhref = "ですhttp：//プラグインが.jquery.com /プロジェクト/同期」のrel = 『nofollowをnoreferrer』を定期的に自動的にサーバーへのユーザー入力を送信するためにあなたの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

あなたは、シンプルで軽量を探しているなら、私は、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.
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top