通过 html 类维护 javascript 中的状态

它确实将逻辑与UI混合在一起，但这样做并不是太糟糕，这可能很难长期维护。

不过有一个问题。如果提交请求（无论是设置还是删除书签）但失败，会发生什么情况？那么你的班级与现实脱节。

您还需要记住，其他事情可能会更改 CSS 类。任何形式的客户端代码都可能更改类，因此也要警惕这一点。

另外，当用户关闭页面并稍后重新打开它时会发生什么？除非你不关心长期状态，否则你仍然需要在某个地方有另一个设置来跟踪。

如果您确实关心长期状态，则可以使用 cookie、本地存储或后端存储来维护该状态，具体取决于系统的设计。在这种情况下，尝试纯粹在类中维护状态可能没有任何好处，尽管该类可能仍然有用，但仅用于 UI 目的，但在 JS 变量中跟踪状态会更健壮。

你可以看看像 REACT 这样的东西来帮助你做这些事情。以一些初始负载"重量"为代价，您可以在保持状态和保持反应方面获得很多帮助。

对于这个答案，我认为您可以访问服务器 API，并且状态 - 某些用户 ID 和书签项，可以随时由 API 检索。如果我的假设不正确，请立即停止阅读。

因此，服务器（可能是通过某个数据库）总是知道某个用户（例如user087当前已将项目item118书签）添加为书签。当 ajax 加载了 <span> s 列表时，对于每个项目，我会得到给定用户 id 和项目 id 的值 true/false，无论它是否是书签。然后，我将适当的样式设置为跨度。

通过这种方式，您可以有效地将逻辑与用户界面分开，并且一旦加载<span>，您始终具有正确的状态，并且独立于浏览器行为。

编辑

在提问者的评论之后。此外，您可以将加载的状态填充到对象中。使用此类对象的一个例子是计算（并显示）用户的书签总数，或者在有很多书签时搜索书签，而不必使用 ajax。因此，在加载之间，您可以拥有状态的临时本地数据库。