javascript - CSS 訪問済みリンク - アプリをクリックして訪問した訪問済みリンクを認識する方法は?

Question

アプリで訪問済みリンクの色を変更したい。私のブラウザで発生した訪問へのリファラーを訪問した問題。アプリに表示されるリンクをクリックして発生した訪問のみを認識するにはどうすればよいですか?

Answer 1

これを行うには、すべてのリンクに eventListener または onclick イベントを追加します。次に、すべてのリンクに一意の ID を追加し、それらを Cookie に追加します。アプリをロードするときは、作成された Cookie を読み込んで、クラス名を「already_visited」などに変更するだけです。

編集：

<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>

コードは一目瞭然ですが、不明な点があれば質問してください