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

Question

我用document.links（带有用户脚本）列出了一些网站底部的所有链接。

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

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

（如果不可能，那我怎么能隐藏访问过的链接？我在a:visited 上尝试过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（例如，在每次按下按钮后重新加载）及其输出示例如下：