自动保存更改的最佳方法

Question

我希望删除“保存”按钮并实时自动保存更改。我知道这可以通过使用OnChange函数来实现。

请注意，由于Web应用程序将被很多人使用，因此向服务器发送的请求数量很可能会在短时间内达到极高水平。

什么是自动保存而不会过度发送请求到服务器的最佳方法？

有两种可编辑字段：

1- 简单字段，其字母/单词数量较小。 2- 用于大量副本的文本区域。

- Leo

---

@VenomFangs 目前还没有代码，我正在尝试找出在编写代码之前应该采取哪种方法。 - Leo

简单解决方案，不会意外地导致大量服务器调用：存储一个“hasAnythingChanged”变量，然后每隔x段时间，如果有任何更改，则保存到服务器。(如果他们尝试离开未保存的更改页面，也可能包括提示，这也是个好主意) - DBS

最好将其保存在客户端的本地存储中。 - Charlotte Dunois

有时候，"是否发生了变化"被称为脏位。 - James Oravec

我知道这可能超出了范围，但你有没有考虑在你的项目中使用AngularJS。如果你有许多其他表单，那么这可能会节省你一些时间。 - Mathieu de Lorimier

Answer 1

就个人而言，我会在0.5秒到1秒的防抖时间内完成此操作。如果用户停止输入一段指定的时间，那么保存操作将被执行。这也相当简单实现：

var debounce = null;
$(document).ready(function() {
    $('.field').keydown(function() {
        clearTimeout(debounce);
        debounce = setTimeout(function(){
            // SAVE
        }, 500);
    });
});

- Thomas Maddocks

Answer 2

这是对你问题的非代码回答。

没有好的方法来做到这一点。您可以根据X个单词进行更新，也可以每个字符甚至每秒钟进行更新。问题在于连接数量太多了。

这需要大量的资源和带宽，每次保存时都需要使用互联网连接。然后，您面临的问题是要发送什么到数据库？

如何检查数据库已经有什么？您只是重新发送整个内容吗？

这些都是必须回答的问题。但本质上与现在的情况相同...除了您有某种代码（如我提到的字符更改、单词更改、时间更改），然后将整个文本/字段推送到数据库中，或者仅推送它没有的内容。

因此，没有好的方法来做到这一点。如果我必须这样做，我会在本地存储信息。然后，比方说每30秒更新一次，并将仅更改的字符发送到数据库。

- Trevor Clarke

Answer 3

我建议在失去焦点事件onFocusout上执行自动保存，而不是onChange。这样当输入框失去焦点时，将减少服务器请求次数。为输入框添加一个类，例如class="autosave"，然后创建一个失去焦点监听器。

$('.autosave').focusout(function(){
  autoSave();
});

这里有一个JSFiddle网站的链接: https://jsfiddle.net/fcLuw5p9/

- Justin Ober