定期自动保存表格答案

【问题标题】：Periodically autosave form定期自动保存表格
【发布时间】：2011-04-27 13:01:21
【问题描述】：

如何实现后台定期保存表单？和gmail做的一样。

【问题讨论】：

@flOOr 是定期 ajax 请求。
@flOOr 你能举个例子吗？
这样的人喜欢当你编写一些不起作用的代码然后每个人都开始修复它时:) 而且这与 Ruby 或 Ruby on Rails 无关
@krunal - 我用一个例子更新了我的答案。这对你有用吗？

【解决方案1】：

setInterval(function(){
  var form = $('#my-form-id');
  var method = form.attr('method').toLowerCase();      // "get" or "post"
  var action = form.attr('action');                    // url to submit to
  $[method](action, form.serialize(), function(data){
    // Do something with the server response data      
    // Or at least let the user know it saved
  });
},10000);                                              // do it every 10 seconds

如果你不想使用form的方法，但总是想使用'post'，那么使用：

$.post(action, form.serialize(), ... );

而且，如果您想为自动保存提供与实际保存操作不同的自己的操作：

$.post("/autosave/comments", form.serialize(), ... );

【讨论】：

-@Phrogz，你能在你的第一个代码块中解释表单验证的去向吗？
@timpeterson 3.5 年太迟了回复，但是：我假设您在谈论客户端验证，如果表单无效，您不想提交表单？如果是这样，那么它只是代码，对吧？ if (formIsValid(form)) $[method](...);

【解决方案2】：

您需要在客户端设置一个定时循环，每 x 秒/分钟保存一次表单。这样做的一种粗略方法是使用 setTimeout javascript 函数来收集表单的字段值并通过更新（在 Rails 的情况下为 PUT）AJAX 请求更新模型。

示例

这是一种粗略的方法（即可能有更好的方法）：

// repeat every 10 seconds
var repeatTime = 10 * 1000; 

function updateModel(){
    // get field values (using jQuery, etc.)
    // make ajax request using these field values 
    //(make sure put parameters match model attribute names)
    console.log('updated');
    setTimeout(updateModel, repeatTime); // start call over again
}

setTimeout(updateModel, repeatTime);

我包含了console.log，以便您现在可以在Firebug 中测试它，并查看updateModel 每10 秒执行一次。我建议使用 jQuery 来生成 PUT AJAX 请求。

【讨论】：

你能举个例子吗？
为什么不使用 setInterval() 而不是 setTimeout()？

【解决方案3】：

为什么不使用本地数据库（或其他）纯粹在客户端上执行此操作？这应该会降低复杂性、服务器负载和带宽使用。

永久或每次会话存储——任何合适的——你可以在每次击键后保存：不需要 setTimeout()。

【讨论】：

【解决方案4】：

Sisyphus.js： 类似于 Gmail 的客户端草稿等等。插件开发用于将 html 表单数据保存到 LocalStorage，以便在浏览器崩溃、选项卡关闭和其他灾难后恢复它们。 http://sisyphus-js.herokuapp.com

Smashing Magazine 文章：http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/

【讨论】：

【解决方案5】：

不使用 jquery 的版本：

function urlencodeFormData(fd) {
    var s = '';
    function encode(s) { return encodeURIComponent(s).replace(/%20/g,'+'); }
    for (var pair of fd.entries()) {
        if(typeof pair[1]=='string') {
            s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
        }
    }
    return s;
}

setInterval(function() {
    var form = document.getElementById('my-form-id');
    var request = new XMLHttpRequest();
    request.open(form.method, form.action);
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    request.send(urlencodeFormData(new FormData(form)));
}, 10000);

如果您需要对服务器响应做一些事情，请参阅这篇文章：https://blog.garstasio.com/you-dont-need-jquery/ajax/#posting

【讨论】：