Question

实现自动保存功能的最佳javascript库，或库的插件或扩展是什么？

具体需求是能够“保存”数据网格。想想gmail和Google Documents的自动保存。

如果它已经被发明，我不想重新发明轮子。我正在寻找神奇的autoSave（）函数的现有实现。

自动保存：推送到保存到持久存储的服务器代码，通常是数据库。服务器代码框架超出了本问题的范围。

请注意，我不是在寻找一个Ajax库，而是一个更高级别的库/框架：与表单本身进行交互。

daemach在jQuery @ http://daemach.blogspot.de/2007/03/autosave-jquery-plugin.html [脚本主机关闭]之上引入了一个实现。我不相信它符合轻量级和精心设计的标准。

标准

稳定，轻巧，精心设计
保存onChange和/或onBlur
不会更频繁地保存，然后保存给定的毫秒数
同时处理多个更新
不会保存
按输入类保存到不同的网址

Answer 1

自动保存应该非常简单，您可以使用jquery或mootools等主要框架之一。您需要做的就是在用户编辑应该自动保存的内容时使用window.setTimeout（），并让超时调用javascript frameworks标准的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
    }
}

Answer 2

我知道这个问题已经过时了，但我希望包含一个我最喜欢的代码。我在这里找到了： 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毫秒后保存。

它还具有让用户知道更改已保存的状态

Answer 3

你可以通过使用超时来保存设定的时间，但是，更好的方法可能是只有某种onchange事件处理程序，这样当数据发生变化时，如果你没有保存在设定的数量范围内时间，然后保存，但是，不要保存每次按键。

因此，在调用ajax函数之前，您需要查看上次保存的时间。

这样，您只能在需要时以预定的费率保存。因此，如果您想每5分钟保存一次，那么无论进行了哪些更改，如果在该5分钟窗口内进行了更改，您都可以保存。

进行ajax调用是微不足道的，但jQuery可以简化它。不幸的是，为了得到你想要的东西，从我所看到的，你需要实现自己的功能。如果只改变某些字段，则不同的人可能想要保存，因此很难以一般方式进行。所以，仅仅因为我点击一个选择框可能不会导致保存功能，但改变文本框中的内容可能会。

Answer 4

对于Cookie中表单字段的简单自动保存，我使用这个很棒的插件http://rikrikrik.com/jquery/autosave/ 它不会向服务器发送数据，但是如果你没有找到更好的东西，那么从头开始更容易升级它。

Answer 5

我建议您使用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"
});

这就是全部。你可以在http://jquery.com/找到jQuery。

Answer 6

如果您正在寻找简单轻量级，我认为您可以获得的最轻量级是使用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.

Answer 7

synchronize是一个jquery plugin，可以为您的html页面添加功能，以定期自动将用户输入发送回服务器。（source code）

JavaScript和HTML示例：

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

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

在默认延迟1s后产生ajax请求：

http://localhost/entity.cfc?method=updateDescription&value=update_value&preVal=initial_value&ID1=1&ID2=2

Answer 8

是不是你需要一个每x秒触发一次的计时器？回调函数将对表单的服务器执行AJAX回发，并添加“autosave = true”字段。只需在服务器上处理此回发即可完成。

AJAX自动保存功能

8 个答案: