History with last accessed links

Asked

Viewed 472 times

-1

I recently saw a site with a somewhat cool system, it showed a history with all the links that the visitor had clicked, showing images and page titles, and clearly used browser cookies. I researched some functions and ended up arriving at a function window.history, more could not reach the expected result, someone has a notion of how to do ?

javascript

  • Then you will need a somewhat complex system that sub to the first position the most current item and lower the previous ones correctly and do not repeat the items. I posted the answer, but there’s no way to be accurate without @Gabriel having some Jscript knowledge base.

1 answer

1


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

In the example I will 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 make systems from scratch, but for this case I will leave ready and hope you understand and take advantage, in this example I just put to save the history URL:

<!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 advise studying ElementsByTagName, for example, to get the image of the meta tag OpenGraph imaging:

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

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

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

Will stay like this:

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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.