javascript - 自动保存用户输入的内容——最聪明的实现方式？

Question

我正在开发一个社交网站，我正在使用 php/mysql/jquery，我希望用户拥有最人性化的网站体验。这就是为什么我尽量避免使用保存(提交)按钮的原因。因此，当他们在自己的个人资料中输入他们说什么语言或住在哪里等信息时，我想自动创建一个页面条目，如果它不存在的话。

例如，如果有人说德语并且该条目在数据库中尚不可用(它称为 pages 行 title,text ,添加日期)。这很可能与您可以在 Facebook 上创建的 Facebook 页面相当，但这应该涉及所有内容(语言、公司、地点、事件)。

所以我现在的具体问题是，如何以最聪明的方式实现此功能。我的意思是应该在什么事件上触发这个保存，因为我显然不能在每个输入的字母上保存一个新条目。我已经实现了一个自动完成功能，因此他们可以从已经存在的条目中进行选择，但如前所述，我希望他们也创建新的条目(页面)。最好不要用新条目“淹没”数据库。

我想到的事情:

1. 当用户从一种输入方式切换到另一种输入方式时 制成。这甚至可以由 JQuery 注册吗？但这是 问题，如果他离开页面而不切换到另一个页面怎么办 输入。

2. 只有在他离开当前页面时才保存所有数据。我认为 JQuery 中有这个onunload 函数。

3. 获得用户的确认:“尚未输入此条目。 你想保存这个条目吗？”。但我应该什么时候问这个？我 无法预测用户何时完成输入。

Answer 1

您可以执行以下操作:

1) 每次用户按下按钮或在输入字段内单击时 - 使用 setTimeout 注册超时(如果超时已设置 - 清除它)。以毫秒为单位的实际超时由您决定，它取决于用户和他们输入的数据 - 可能半秒或一整秒都可以。

2) 超时内——向后端提交数据

3) 正如您所提到的 - 如果用户试图在等待超时的情况下离开页面 - 问他是否真的想离开。请记住，您从卸载处理程序本身可以做的事情是有限的，所以最好只是将他返回到页面并调用保存然后(因为 AJAX 可能无法从该处理程序工作，或者至少不会在所有浏览器中保持一致)。

var to = null;
$(':input').on('click contextmenu keyup blur', function () {
  if(to) { clearTimeout(to); }
  to = setTimeout(function () {
    $.ajax(...send data to server...).done(function () {
      // possibly show a message indicating the data was saved
    })
  }, 1000);
});
window.onbeforeunload = function() {
  if(to) {
    return "Are you sure you want to navigate away, you have unsaved data?";
  }
}