仅列出 document.links 未访问过的链接

Question

我将所有 link 都列在某些网站的底部 document.links（使用用户脚本）。

已访问和未访问的 url-s 一起出现。我可以为它们设置不同的颜色，因此很容易看出哪些 link 是新的，哪些是我已经访问过的。但我只想看新的 links.

有没有办法告诉 document.links 只列出未访问的（新）（a:link）links？

(如果不可能，那我怎么能隐藏访问过的 links？我已经在 a:visited 上尝试了 visibility:hidden; 和 display:none;，但没有用。发现它是 privacy related 的东西，但我不想触摸原始页面上的 link，只在我的 link 集合中，它是那些的副本。）

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 显式存储被点击的链接并保留 "visited" 属性，以便您可以识别已被触摸的链接：

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';
        }
    }
}

这种方法会将 "visited" class 附加到您的元素，并允许您通过使用纯 CSS 方法显式删除它们：

a.visited { display: none; }

或者使用类似于您最初使用的技术的 Javascript 技术：

document.querySelectorAll('a.visited');

使用localStorage技术的示例

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

仅列出 document.links 未访问过的链接

List only unvisited links with document.links

javascript

css

hyperlink

userscripts