Javascript 如何在页面上添加指定可见/不可见项的类？

我想显示一个图标，表明一个网页的访问者是否已经看到了一个项目。例如，如果你第一次访问主页，feed中的所有文章都会有一个图标，上面写着NEW。然后，如果你离开主页返回，只有上次访问后的新文章才会有图标，其他所有文章都会消失

我使用的是Rails 4，但在客户端使用Jquery/javascript，使用cookie或localStorage，这似乎很容易做到

有什么好的解决办法

作为参考，我有一个页面显示文章提要，每个文章都有一个唯一的id，如下所示。我希望有一个类，比如newitem，它将在页面卸载时从所有可见元素中删除，并一直保留到用户清除本地存储或cookie过期。因此，在下面的示例中，前两个项目将有一个新的标记，而后两个项目之前已被看到，并且标记已被隐藏

<ol>
  <li class="article" id="article-articleA" data-id="articleA">
    <p class="article-content new-item"><i class="material-icons">star</i>NEW</p>
    ...
  <li>
  <li class="article" id="article-articleB" data-id="articleB">
     <p class="article-content new-item"><i class="material-icons">star</i>NEW</p>
    ...
  <li>
  <li class="article" id="article-articleC" data-id="articleC">
     <p class="article-content" style="display: none;"><i class="material-icons">star</i>NEW</p>
    ...
  <li>
  <li class="article" id="article-articleD" data-id="articleD">
     <p class="article-content" style="display: none;"><i class="material-icons">star</i>NEW</p>
    ...
  <li>
</ol>

---

最好的解决方案有点虚拟，它取决于您的环境、体系结构、性能需求等，。如果你的feed收到很多请求，我会使用cookie/javascript解决方案来消耗客户端计算机的能量……你在语义上是对的。我编辑了这个问题。