javascript - 使用 document.links 仅列出未访问的链接

Question

我使用 document.links(带有用户脚本)列出了某些网站底部的所有链接。

已访问和未访问的 url-s 一起出现。我可以为它们设置不同的颜色，这样很容易看出哪些链接是新的，哪些是我已经访问过的。但我希望只看到新链接。

有没有办法告诉 document.links 只列出未访问的(新)(a:link)链接？

(如果不可能，那我怎么能隐藏访问过的链接呢？我已经在 a 上尝试了 visibility:hidden; 和 display:none;:已访问，但无法正常工作。发现它是一个 privacy related 的东西，但我不想触摸原始页面上的链接，只在我的链接集合中，它是这些链接的副本。)

Answer 1

可能不可能

我不完全确定这有多大可能 due to the security issue similar to the one you mentioned in this similar article这导致 :visited 选择器受到严格限制，使得编程访问在现代浏览器中几乎不可能。

通过 localStorage 解决方法

我想 you could use a workaround similar to the one mentioned in this blog post ，它使用 localStorage 显式存储被点击的链接并保留“已访问”属性，以便您可以识别已被触摸的链接:

function check_visited_links(){
    // Access all of the elements that have been visited (from local storage)
    var visited_links = JSON.parse(localStorage.getItem('visited_links')) || [];
    // Iterate through your links
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        var that = links[i];
        // When the link is clicked, store a reference in localStorage to it
        that.onclick = function () {
            var clicked_url = this.href;
            if (visited_links.indexOf(clicked_url)==-1) {
                visited_links.push(clicked_url);
                localStorage.setItem('visited_links', JSON.stringify(visited_links));
            }
        } 
        // Indicate the link was visited by setting it's class
        if (visited_links.indexOf(that.href)!== -1) { 
            that.className += ' visited';
        }
    }
}

这种方法会将“已访问”类附加到您的元素，并允许您使用纯 CSS 方法显式删除它们:

a.visited { display: none; }

或者通过使用类似于您最初使用的 Javascript 技术:

document.querySelectorAll('a.visited');

使用 localStorage 技术的示例

您可以 see an example that uses the localStorage technique here (出于示例目的，只需在每次按下按钮后重新加载)及其输出示例如下: