AJAX 自动保存功能

Question

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

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

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

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

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

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

标准

• 稳定、轻量级、精心设计的
• 保存 onChange 和/或 onBlur
• 保存的频率不会超过给定的毫秒数
• 处理同时发生的多个更新
• 如果自上次保存以来没有发生任何更改，则不会保存
• 每个输入类保存到不同的 url

Answer 1

我知道这个问题很旧，但我想包含一个我最喜欢的代码。 我在这里找到了它：
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 2

自动保存的实现应该非常简单，您可以使用 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
    }
}

Answer 3

您可以通过使用超时来保存设定的时间，但是，更好的方法可能是只使用某种 onchange 事件处理程序，这样当数据更改时，如果您没有在设定的时间内保存，那么保存，但是，不要保存每次击键。

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

这将使您能够仅在需要时以预定的比率进行储蓄。 因此，如果您想每 5 分钟保存一次，那么无论进行了哪些更改，只要在您保存的 5 分钟窗口内进行了更改。

进行 ajax 调用很简单，但 jQuery 可以简化它。 不幸的是，根据我的观察，为了得到你想要的东西，你只需要实现你自己的功能。 以通用的方式很难做到，因为如果只更改某些字段，不同的人可能想要保存。 因此，仅仅因为我单击选择框可能不会导致保存功能，但更改文本框中的某些内容可能会导致保存功能。

Answer 4

为了简单地自动保存 cookie 中的表单字段，我使用这个很棒的插件 http://rikrikrik.com/jquery/autosave/< /a>
它不会将数据发送到服务器，但如果您没有找到更好的东西，那么从功能上升级它比从头开始更容易。

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

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

Answer 8

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'}}" />

默认延迟后生成的 ajax 请求1 秒：

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