我正在创建一个用户可以为某些地方添加书签的网络应用。
为此，我创建了一个span元素，该元素最初具有类no-bookmark。每当用户单击此span元素时，我将检查跨度是否具有上述类。如果它有它意味着用户想要为该地点添加书签，我会向服务器发送ajax请求，然后将类更改为has-bookmark。
如果用户点击跨度并且没有类no-bookmark，那么我假设用户想要删除书签，并向服务器发送请求。
是否有更好的方法来维持状态，或者这种方法是否足够好？
答案 0 :(得分：3)
虽然它确实将逻辑与用户界面混合在一起很难维持，但这样做并不是太糟糕。
虽然有一个问题。如果您提交请求（是否设置或删除书签）会发生什么情况并且失败？然后你的班级与现实脱节。
您还需要记住其他事情可能会改变CSS类。任何形式的客户端代码都可以改变类，因此也要谨慎。
当用户关闭页面并稍后重新打开页面时会发生什么？除非你不关心长期状态，否则你仍然需要在某个地方设置另一个设置。
如果您关心长期状态，则可以使用Cookie，本地存储或后端存储来维护该状态，具体取决于系统的设计。在这种情况下，尝试仅仅在类中维护状态可能没有任何好处，在JS变量中跟踪状态会更加健壮，尽管该类可能仍然有用但仅用于UI目的。
你可以看看REACT之类的东西来帮助你解决这些问题。以一些初始负载＆＃34;重量＆＃34;为代价，您可以获得很多帮助维持状态和被动反应。
答案 1 :(得分：0)
对于这个答案，我想你可以访问服务器API，并且API可以随时检索状态 - 一些用户ID和书签项。如果我没有正确假设，请立即停止阅读。
因此，服务器（可能由某个数据库）始终知道某个用户（user087当前是否已将项目item118加入书签）。
当<span>的列表加载时，对于每个项目，我会得到ajax，给定用户ID和项ID的true/false值，是否是书签？ 。然后我将适当的样式设置为跨度。
通过这种方式，您可以有效地将逻辑与用户界面分开，并且只要<span>加载，始终具有正确的状态，并且与浏览器行为无关。
修改
根据提问者的评论。 此外，您可以将加载的状态填充到对象。使用这样的对象的一个例子是计算（和呈现）用户的书签总数，或者如果有足够的话则搜索书签，而不必使用ajax。因此，在加载之间，您可以拥有状态的临时本地数据库。