History with last links accessed

Question

History with last links accessed

Navigation

#1 by (0 votes)

-1

Recently I saw a site with a somewhat cool system, it showed a history with all the links the visitor had clicked, showing images and page titles, and clearly used browser cookies. I tried some functions and I ended up getting a window.history function, but it was not possible to get the expected result, does anyone have a notion how to do it?

javascript

asked by anonymous 16.02.2018 / 22:13

1 answer

I can not do a slideshow in my code What does the aside tag do in HTML? [duplicate]

score 0 · Accepted Answer

As far as I remember window.history in modern browsers was restricted by security, as you said, the solution would be cookies, but if you are not going to save anything on the server you can also use localStorage (limited to 5Mbs) / p>

In the example I'll make a limit of 7 historical.

To save the link you are currently browsing:

localStorage.setItem("URL_1",window.location.toString());

I do not usually do systems from zero, but in this case I'll leave it ready and hope you understand and I use it, in this example I just put it to save the URL of the history:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TÍTULO</title>
<meta property="og:image" name="og:image" content="https://url_da_imagem" />
<script>
window.onload = function() {
  showHistory();
};

function saveHistory(){
    var count_h = localStorage.length;
    if(count_h != 7){
        /* INICIAR LISTAGEM EM BRANCO */
        localStorage.setItem('URL_0',window.location.toString());
        localStorage.setItem('URL_1',"");
        localStorage.setItem('URL_2',"");
        localStorage.setItem('URL_3',"");
        localStorage.setItem('URL_4',"");
        localStorage.setItem('URL_5',"");
        localStorage.setItem('URL_6',"");
    }else{
        /* Subir ITEM atual e abaixar mais antigos */
        for(j=0;j<6;j++){
            var save = true;
            if(window.location.toString() == localStorage.getItem("URL_"+j)){
                save = false;
                break;
            }
        }

        if(save == true){
            localStorage.setItem('URL_6',localStorage.getItem("URL_5"));
            localStorage.setItem('URL_5',localStorage.getItem("URL_4"));
            localStorage.setItem('URL_4',localStorage.getItem("URL_3"));
            localStorage.setItem('URL_3',localStorage.getItem("URL_2"));
            localStorage.setItem('URL_2',localStorage.getItem("URL_1"));
            localStorage.setItem('URL_1',localStorage.getItem("URL_0"));
            localStorage.setItem('URL_0',window.location.toString());

        }
    }
}

var empty;
function showHistory(){
    saveHistory();
    var list = document.getElementById('history');
    empty = list.innerHTML;
    var count_h = localStorage.length;
    list.innerHTML = "";
    for (i = 0; i < count_h; i++) {
        var tmp_key = localStorage.getItem(localStorage.key(i));
        console.log(tmp_key);
        if(tmp_key != ""){
            list.innerHTML += "<li>"+tmp_key+"</li>";
        }
    }
}

function clearHistory(){
    document.getElementById('history').innerHTML = empty;
    localStorage.clear();
    localStorage.setItem('URL_0',window.location.toString());
}
</script>
</head>
<body>
<a href="?A01">A01</a> | 
<a href="?B02">B02</a> | 
<a href="?C03">C03</a> | 
<a href="?D04">D04</a> | 
<a href="?E05">E05</a> | 
<a href="?F06">F06</a> | 
<a href="?G07">G07</a> | 
<a href="?H08">H08</a> | 
<a href="?I09">I09</a> | 
<a href="?J10">J10</a> | 
<a href="?K11">K11</a> | 
<a href="?L12">L12</a>
</ul><br /><p onclick="clearHistory()">[Limpar Histórico]</p>
<ul id="history">
<li>-- SEM HISTÓRICO --</li>
</body>
</html>

To save image and title I recommend studying ElementsByTagName , for example, to get the image of the meta tag OpenGraph of image:

document.getElementsByTagName('meta')['og:image'].content

Now to get the data of these meta tags you have to add the name attribute with the same term used in property , then following the example, from:

<meta property="og:image" content="https://url_da_imagem" />

It will look like this:

<meta property="og:image" name="og:image" content="https://url_da_imagem" />