javascriptcssvisited

CSS visited links- how to recognize visited links which visited by clicking through my app?


I want to change the colour of visited links in my app. The problem that visited referrers to any visit which occurred in my browser. How can I recognize only visits which occurred by clicking on a link which display in my app?


Solution

  • You can do this by adding a eventListener or an onclick event to all of you links. Then add unique IDs to all of the links and add them to a cookie. When you load your app, just read out the created cookie and change the class name to something like "already_visited"

    EDIT:

    <a id="link1" href="page1.html">link 1</a>
    <a id="link2" href="page2.html">link 2</a>
    <a id="link3" href="page3.html">link 3</a>
    
    <style type="text/css">
        .already_visited{
            color: #f00;
        }
    </style>
    
    
    <script type="text/javascript">
    
        window.addEventListener("load", function function_name(argument){
            var links = eval(getCookie("links_visited"));
            for(var i = 0; i < links.length; i++){
                document.getElementById(links[i]).classList.add("already_visited");
            }
        });
    
        /* Add events to all links */
        function callback(e) {
            var e = window.e || e;
    
            if (e.target.tagName !== 'A'){
                return;
            }
    
            /* call cookie function */
            addToVisited(e.target.id);
        }
    
        if (document.addEventListener){
            document.addEventListener('click', callback, false);
        }
        else{
            document.attachEvent('onclick', callback);
        }
    
        /* cookie function */
        function addToVisited(link_id){
            var ids = getCookie("links_visited");
    
            if (ids == "") {
                setCookie('links_visited', '["'+link_id+'"]', 365);
            }
            else if(ids.indexOf(link_id) == -1){
                var id_array = eval(ids);
                id_array.push(link_id);
                setCookie("links_visited", '["'+id_array.join('","')+'"]', 365);
            }
    
            console.log(getCookie("links_visited"));
        }
    
        /* cookie function helpers */
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays*24*60*60*1000));
            var expires = "expires="+d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
        }
    
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
            return "";
        }
    
    </script>
    

    The code should be self-explanatory, but ask if anything is unclear to you