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" />
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.
– RpgBoss