Por mucho tiempo la forma de manejar el historial y ofrecer la posibilidad de agregar a favoritos aplicaciones AJAX fue utilizando location.hash. Ahora con HTML5 podemos reemplazar location.hash por una mejor solucion: pushState
Pushstate es la forma de cambiar la URL por javascript sin recargar la página. Se utiliza de la siguiente forma:
window.history.pushState(data, "Titulo", "/nuevo-recurso");
- Primer argumento (Object o String): Datos almacenados que pueden ser utilizados en el evento window.onpopstate; activado cuando se usa un pushState() oreplaceState().
- Segundo argumento (String): Modifica el titulo del nuevo estado. El título (ó <title>) del documento no cambia. Es una descripción para el manejo de historial.
- Tercer argumento (String): Ruta al nuevo recurso, por razones de seguridad no se modifica el dominio.
Para dar soporte a los botones de “atrás” y “adelante” y evitar la recarga de la página se puede utilizar el evento windows.onpopstate
Les dejo un ejemplo de funcionamiento.
<!DOCTYPE HTML>
<title>Página 5</title>
<p>Estas en la página<span id="coord">5</span>.</p>
<p>
<a href="?x=6" onclick="go(1); return false;">Ir a página 6</a> o
<a href="?x=4" onclick="go(-1); return false;">Volver a página 4</a>?
</p>
<script>
var currentPage = 5; // Arrancamos desde la pagina 5
function go(d) {
setupPage(currentPage + d);
history.pushState(currentPage, document.title, '?x=' + currentPage);
}
onpopstate = function(event) {
setupPage(event.state);
}
function setupPage(page) {
currentPage = page;
document.title = 'Página ' + currentPage;
document.getElementById('coord').textContent = currentPage;
document.links[0].href = '?x=' + (currentPage+1);
document.links[0].textContent = 'Ir a página ' + (currentPage+1);
document.links[1].href = '?x=' + (currentPage-1);
document.links[1].textContent = 'Volver a página ' + (currentPage-1);
}
</script>
Documentación de la W3G: http://www.w3.org/TR/html5/history.html
![[Facebook]](http://blog.alebanzas.com.ar/wp-content/plugins/bookmarkify/facebook.png)
![[Google]](http://blog.alebanzas.com.ar/wp-content/plugins/bookmarkify/google.png)
![[LinkedIn]](http://blog.alebanzas.com.ar/wp-content/plugins/bookmarkify/linkedin.png)
![[Twitter]](http://blog.alebanzas.com.ar/wp-content/plugins/bookmarkify/twitter.png)
![[Windows Live]](http://blog.alebanzas.com.ar/wp-content/plugins/bookmarkify/windowslive.png)
![[Email]](http://blog.alebanzas.com.ar/wp-content/plugins/bookmarkify/email.png)
Hola,
Tengo qսe reconocer es lla primera veez que he entrado el blog
y quiero deciг que me resulta interesante y segurɑmente
me teոdras mas a menudo por estos lares.
😉