How to access the visited links history

Question

I've have tried to get the visited links using CSS :visited property, but it is not working.

Is there any method or workaround to get the visited links using JavaScript, jQuery, or through any other technologies?

Answer 1

As mentioned by @Nevershowmyface, you can just access the last visited page.

Here are two examples, one using CSS and one using jQuery.

Answer 2

enter code hereIt's not supported by javascript as I also try to find methods to collect a:visited links data to hide the node visited.

some reference: Privacy and the :visited selector - CSS | MDN

If all you care about is styling, you should be able to achieve it through CSS, but through what is displayed on screen should be the only way to observe it being visited.

I do this way in a userscript for Greasemonkey to let those sites without a:visited style display those already visited links.

// ==UserScript==
// @description    ADD a:visited for CSS
// @include        *annalscts.com*
// @include        *thejns.org*
// @include        *turkishneurosurgery.org.tr*
// @include        *nature.com*
// @include        *academic.oup.com*
// @include        *sagepub.com*
// @grant          GM_addStyle
// ==/UserScript==
GM_addStyle('a:visited {color:#EE5665 !important}');

For collect the data to local I use the Greasemonkey API

GM_setValue 
GM_getValue

I just watched tutorials on Youtube for the API and try to write into the userscript

Greasemonkey API: Values just search for this title on Youtube.

Written Tutorial: http://nulleffort.com/greasemonkey-api-values/

Greasemonkey Docs: https://wiki.greasespot.net/Greasemonkey_Manual:API

some parts of my userscript

//Firstly, var the ordinary variable preVisitedLinks and assigning to memory variable visitedLinks (At first the value should be undefined)
var preVisitedLinks = GM_getValue("visitedLinks");
unsafeWindow.aclick = function(tlink){
    window.open(tlink, '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=10,left=10,width=10,height=10'); // click a button added and get the link visited in my script 
    //If the ordinary variable preVisitedLinks is undefined (First time running the script)
    if(preVisitedLinks.includes('undefined')){
        GM_setValue('preVisitedLinks', '|' + tlink.replace('http://paper.pubmed.cn/',''));
    }
    //If the ordinary variable preVisitedLinks is not undefined, continue to add each new string collect
    else{
        GM_setValue('preVisitedLinks', preVisitedLinks + '|' + tlink.replace('http://paper.pubmed.cn/',''));
    }
    //The ordinary variable preVisitedLinks assigning to memory variable visitedLinks value. The magic is the variable name the same.
    preVisitedLinks = GM_getValue("preVisitedLinks");
    if(preVisitedLinks.length > 27500){
        preVisitedLinks = preVisitedLinks.substr(preVisitedLinks.length - 27500);
    }
    //The memory variable visitedLinks value assigning to the ordinary variable preVisitedLinks value
    GM_setValue('visitedLinks',preVisitedLinks);
    console.info(preVisitedLinks);
};

And in some place I use the string to detect the visited links code

if(preVisitedLinks.includes(trs[i].querySelectorAll('li')[0].querySelector('a').href.replace('http://xxx.xxxx.com/',''))){
        trs[i].remove();
    }

Answer 3

You can create your own link history using localStorage, and store which links were clicked, and how many times a link was clicked.

This code in the Stack Snippet might not work below, but you can paste the code into your file or a JSFiddle and it will work fine. The link history will be saved in localStorage, and every time you click the anchor its corresponding count increases.

$('a').on("click",function(){
var anchorhistory=localStorage.getItem($(this).attr("id"));
if(anchorhistory){
anchorhistory=parseInt(anchorhistory)+1;
localStorage.setItem($(this).attr("id"), anchorhistory);
alert($(this).attr("id")+" is clicked "+anchorhistory+" Times");
}
else{
anchorhistory=1;
localStorage.setItem($(this).attr("id"), anchorhistory);
alert($(this).attr("id")+" is clicked "+anchorhistory+" Times");

}
})

ul a{
  cursor:pointer;
  color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a id='anchor1'>anchor1</a></li>
<li><a id='anchor2'>anchor2</a></li>
<li><a id='anchor3'>anchor3</a></li>
<li><a id='anchor4'>anchor4</a></li>
</ul>