绑定单击事件，然后在事件处理程序函数上使用CSS取消文本的粗体。下面是示例代码：

const messageIds = JSON.parse(localStorage.getItem("messageIds"));
var messageIdsArr = messageIds ? Array.from(messageIds) : [];

document.querySelectorAll("td").forEach((td) => {
  // Check if message already read or not
  if (messageIdsArr.length && messageIdsArr.includes(td.getAttribute("id"))) {
    td.style.fontWeight = "normal";
  } else {
    td.addEventListener("click", removeBold);
  }
});

function removeBold(e) {
  const target = e.currentTarget;
  target.style.fontWeight = "normal";

  // Update the LocalStorage
  messageIdsArr.push(target.getAttribute("id"));
  localStorage.setItem("messageIds", JSON.stringify(messageIdsArr));
}

td{
  border: 1px solid black;
  font-weight: bold;
  cursor: pointer;
}

<table>
  <thead></thead>
  <tbody>
    <tr>
       <td id="1">Message 1</td>
       <td id="2">Message 2</td>
       <td id="3">Message 3</td>
    </tr>
  </tbody>
 </table>

每个消息都有唯一的ID。然后使用localStorage保存已读取消息的id。因此，即使在页面加载时，已读消息也不会加粗。

注意，代码不会在stackoverflow snippet上运行，因为snippet中的localStorage受到限制。但会工作得很好，在snippet之外。希望对大家有帮助。