如何用jQuery和LocalStorage实现新添加未查看项的加粗高亮

以下是适配需求的实现代码，完全基于jQuery和LocalStorage，无需Cookie或MutationObserver：

修改后的HTML #

<div id="id00001" class="classer">ITEM 1</div><br><br>
<div id="id00002" class="classer">ITEM 2</div><br><br>
<div id="id00003" class="classer">ITEM 3</div><br><br>
<div id="id00004" class="classer">ITEM 4</div><br><br>
<div id="id00005" class="classer">ITEM 5</div><br><br>
<center><button class="reseter">Reset</button></center>

修改后的CSS #

body {background: black;}
.classer {position: absolute; padding: 5px; background: #323232; width: 50%; left:25%; color: white; font-weight: 900;}
.viewed {font-weight: 100;}
.reseter {color: blue;}

修改后的JavaScript #

// 点击元素切换已查看状态并更新LocalStorage
$(".classer").click(function(event) {
  event.preventDefault();
  const itemId = $(this).attr("id");
  $(this).toggleClass('viewed');
  
  if ($(this).hasClass("viewed")) {
    localStorage.setItem(itemId, 'true');
  } else {
    localStorage.removeItem(itemId);
  }
});

// 页面加载时根据LocalStorage恢复已查看状态
$(".classer").each(function() {
  const itemId = $(this).attr("id");
  if (localStorage.getItem(itemId) === 'true') {
    $(this).addClass("viewed");
  }
});

// 重置按钮清空LocalStorage并刷新页面
$(".reseter").click(function() {
  localStorage.clear();
  window.location.reload();
});

关键改动说明 #

• HTML结构调整：移除所有元素默认的viewed类，让未被查看过的项默认保持加粗样式（继承.classer的font-weight:900）。
• JavaScript逻辑优化：
  • 合并原本分散的两个点击事件，减少冗余代码。
  • 初始化时仅对LocalStorage中存在记录的元素添加viewed类，确保新添加且无记录的项默认加粗。
  • 整合重置操作逻辑，无需单独定义刷新函数。
• 需求适配：
  • 新添加的项（无LocalStorage记录）默认显示加粗。
  • 已查看的项（点击过且LocalStorage有记录）在页面刷新或下次访问时自动取消加粗。
  • 点击重置按钮清空所有记录，刷新后所有项恢复加粗状态。

内容的提问来源于stack exchange，提问作者Liudvik Askinis