记住跨页面选中的复选框 - 最好的方法是什么？

Question

我需要添加类似于 Gmail 的功能，其中项目列表上的复选框会在多个结果页面以及离开和返回结果时被记住。我想弄清楚的是最好的方法。我正在使用 PHP，可能还有 jQuery。

我的第一个想法是在每个复选框中添加一个 onClick，触发 AJAX 回调到服务器，该服务器将 id 存储在会话中的数组中。每次加载项目列表时，系统都会检查该行是否被选中，并在必要时选中复选框。出于可靠性考虑，在检查是否无法完成对服务器的请求（连接问题、服务器错误等）后，将取消选中该复选框，并且将尽可能快地发出请求。

这听起来不错，除了一些项目：

• 检查所有：会发生什么？它是否向服务器发送 30 个（默认页面项）请求？还是我删除所有的onClicks，选中复选框，向服务器发送带有所有ID的请求，然后重新添加onClicks？要么...？取消选中所有类似的问题。
• 速度：如果 100 多个用户一直在检查和取消检查，可能会出现问题
• 浏览器速度：我认为最好在页面加载后使用 JS 添加 onClick，如果一页上有 500 个或更多项目，我认为这可能需要一两秒。检查所有会成为一个更大的问题。

过去，我还没有找到一种可靠的方法来检测用户何时离开页面。如果有可靠的方法，那么我可以看到这是一个选项，因此它只记录在每个卸载页面上。

还有其他解决方案或更好的方法吗？

编辑： 正如Eran Galperin 所述，check all 方法只需要检查每个复选框，然后对所有行进行 ajax 调用。无需移除 onClick。

此外，事件委托方法看起来是个好主意——会让事情变得更容易。

Answer 1

1. 当您以编程方式更改复选框的选中状态时，不会触发 onclick 事件。当用户单击全选/取消全选链接时，您可以发送不同的 AJAX 请求，而不必担心附加到各个复选框的单击事件。
2. 这是使用每次点击请求时的权衡。或者使用“保存”按钮保存整个表单。
3. 使用event delegation - 将一个onclick 事件附加到包含所有复选框的整个容器，并检查事件的目标以查看是否单击了复选框。另外，我个人会避免在同一页面上显示 500 个不同的选项。如果绝对有必要拥有这么多选项，请将它们分成几个区域/页面。

对于离开页面的用户，您可以使用onbeforeonload 事件，但是如果浏览器崩溃或以其他方式不正常退出，则不会被捕获。根据捕获用户更改的重要性来使用它。