javascript 定期自动保存表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5804528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Periodically autosave form
提问by krunal shah
How to implement a periodical save of a form in the background? Same kinda thing that gmail does.
如何在后台实现表单的定期保存？和 gmail 做的一样。
回答by Phrogz
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
If you don't want to use the method of the form, but always want to use 'post', then use:
如果你不想使用表单的方法，但总是想使用'post'，那么使用：
$.post(action, form.serialize(), ... );
And, if you want to supply your own action for the autosave that is different from the action for the actual save:
而且，如果您想为自动保存提供与实际保存操作不同的操作：
$.post("/autosave/comments", form.serialize(), ... );
回答by McStretch
You would need a timed loop on the client side that would save the form every x seconds/minutes. A crude way of doing this would be to have a setTimeoutjavascript function that collects the form's field values and updates the model via an update (PUT in Rails' case) AJAX request.
您需要在客户端进行定时循环，每 x 秒/分钟保存一次表单。一种粗略的方法是使用一个setTimeoutjavascript 函数来收集表单的字段值并通过更新（在 Rails 的情况下为 PUT）AJAX 请求来更新模型。
Example
例子
Here's a crude way of doing it (i.e. there might be a better way):
这是一种粗略的方法（即可能有更好的方法）：
// 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);
I included the console.logso that you can test this out in Firebug right now and see that the updateModelexecutes every 10 seconds. I would recommend using jQuery to generate the PUTAJAX requests.
我包含了console.log以便您现在可以在 Firebug 中测试它并查看updateModel每 10 秒执行一次。我建议使用 jQuery 来生成PUTAJAX 请求。
回答by Sam Dutton
Why not do this purely on the client, using a local database (or whatever)? That should reduce complexity, server load and bandwidth usage.
为什么不使用本地数据库（或其他）纯粹在客户端上执行此操作？这应该会降低复杂性、服务器负载和带宽使用。
Permanent or per-session storage -- whatever's appropriate -- and you can save after every keystroke: no need for setTimeout().
永久或每个会话的存储——任何合适的——你可以在每次击键后保存：不需要 setTimeout()。
回答by Himanshu Saini
Sisyphus.js:Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. http://sisyphus-js.herokuapp.com
Sisyphus.js：类似于 Gmail 的客户端草稿等等。插件开发用于将 html 表单数据保存到 LocalStorage 以在浏览器崩溃、选项卡关闭和其他灾难后恢复它们。 http://sisyphus-js.herokuapp.com
Smashing Magazine article: http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
Smashing Magazine 文章：http: //coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/
回答by Marián ?erny
Version that works without jquery:
不使用 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);
If you need to do something with the server response see this post: https://blog.garstasio.com/you-dont-need-jquery/ajax/#posting
如果您需要对服务器响应执行某些操作，请参阅此帖子：https: //blog.garstasio.com/you-dont-need-jquery/ajax/#posting
