如何追踪网站链接点击状态？尝试querySelector+a:visited遭浏览器限制

由于浏览器出于隐私保护限制，无法通过JS读取:visited伪类的状态信息，所以必须通过自定义状态存储的方式来追踪链接的点击情况，具体实现步骤如下：

1. 给链接添加唯一标识 #

给每个需要追踪的<a>标签设置data-id属性，作为该链接的唯一标识，示例代码：

<a href="https://example.com/page1" data-id="link-page1">页面1</a>
<a href="https://example.com/page2" data-id="link-page2">页面2</a>
<a href="https://example.com/page3" data-id="link-page3">页面3</a>

2. 监听点击事件，记录点击状态 #

给所有链接绑定点击事件，将点击过的链接标识存入本地存储（localStorage持久保存，sessionStorage关闭页面即清空，可按需选择）：

const links = document.querySelectorAll('a[data-id]');

links.forEach(link => {
  link.addEventListener('click', function() {
    const linkId = this.dataset.id;
    // 读取已存储的点击记录
    let clickedLinks = JSON.parse(localStorage.getItem('clickedLinks')) || [];
    // 避免重复记录
    if (!clickedLinks.includes(linkId)) {
      clickedLinks.push(linkId);
      localStorage.setItem('clickedLinks', JSON.stringify(clickedLinks));
    }
  });
});

3. 页面加载时定位第一个未点击链接 #

页面初始化时，读取本地存储的已点击列表，遍历链接找到第一个未被点击的目标：

window.addEventListener('load', function() {
  const clickedLinks = JSON.parse(localStorage.getItem('clickedLinks')) || [];
  const links = document.querySelectorAll('a[data-id]');

  // 给已点击链接添加样式
  links.forEach(link => {
    if (clickedLinks.includes(link.dataset.id)) {
      link.classList.add('visited-link');
    }
  });

  // 定位第一个未点击链接
  for (const link of links) {
    if (!clickedLinks.includes(link.dataset.id)) {
      // 滚动到该链接位置并高亮
      link.scrollIntoView({ behavior: 'smooth' });
      link.classList.add('unvisited-highlight');
      break;
    }
  }
});

4. 自定义样式（可选） #

通过CSS类模拟已点击/未点击链接的样式，替代浏览器默认的:visited伪类：

/* 已点击链接样式 */
.visited-link {
  color: #666;
  text-decoration: line-through;
}

/* 未点击链接高亮样式 */
.unvisited-highlight {
  border: 2px solid #2196F3;
  padding: 2px 4px;
}

注意事项 #

• 本地存储属于域名级别，同一域名下的所有页面共享点击记录；若需区分不同页面，可在存储键名中加入页面标识，比如clickedLinks_article1
• 若用户清除浏览器缓存，本地存储的记录会丢失；如果需要跨设备持久化，可结合后端接口，将点击记录关联到用户账号存储

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