Registrar Histórico

Asked

Viewed 41 times

-3

I have that problem:

Create an anagram detector.

  • Given two words, check if they are anagrams among themselves.

- It is important to record the history, that is, even closing and opening the tab then the list of results should continue appearing.

  • The page should be dynamic and as amazing as you can make it.

I’m wondering how to make history (keep page changes) with js and html. Would have suggestions where I can search or some solution?

Thanks for the help. I’m new here and I’m not sure how it works.

javascript html5

  • You can use localStorage

  • Welcome to Stackoverflow, to start do a [tour] on the site, and then see [Ask] and [Answer]

1 answer

1

I did so in a very similar request:

History with last accessed links

The solution would be cookies, but if you won’t 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());

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>

Browser other questions tagged javascript html5

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