30

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

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

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

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

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

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

标准

  • 稳定、轻便、设计精良
  • 保存 onChange 和/或 onBlur
  • 不比给定的毫秒数更频繁地保存
  • 处理同时发生的多个更新
  • 如果自上次保存后未发生任何更改，则不保存
  • 每个输入类保存到不同的 url
4

8 回答 8

50

自动保存应该很容易实现，您可以使用 jquery 或 mootools 等主要框架之一。您需要做的就是在用户编辑应该自动保存的内容后使用 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

我建议你使用 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 。

于 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是一个jquery 插件，它向您的 html 页面添加功能，以定期自动将用户输入发送回服务器。（源代码）

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
于 2009-05-31T04:50:40.063 回答
0

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

于 2009-06-01T04:05:04.613 回答