Estoy desarrollando una página que usa una solicitud ajax para leer un archivo JSON y lo estoy mostrando al hacer clic en un bucle, pero cuando actualizo la página, vuelve a la primera pantalla. ¿Está allí de todos modos para devolver la misma pantalla después de actualizar?
Aquí he creado un "marco" para mantener las estadísticas de su página.
La solicitud AJAX ocurre cuando cambia el hash en la URL (aquí el estado es "state1": http://example.org/#state1 ). Hay un detector de eventos para el evento hashchange y una función fetshdata() .
Al hacer clic en el botón "Obtener datos", el hash cambiará, se producirá el evento hashchange y se llamará a la función fetshdata() .
Si la página se vuelve a cargar (este es su problema), el "estado" de la página se mantiene en el hash (el hash todavía está en la URL). Para engañar al evento hashchange , hice el evento hashchange "a mano" y lo envié a la ventana.
El estado de la página también podría mantenerse en localStorage, pero la ventaja con el hash en la URL es que el cambio de hash se convierte en parte del historial en el navegador y puede guardar/enviar/vincular a la URL, etc.
const data = 'data:application/json;base64,W3sidGl0bGUiOiJJdGVtIDEifSx7InRpdGxlIjoiSXRlbSAyIn0seyJ0aXRsZSI6Ikl0ZW0gMyJ9XQ=='; var content; const fetchdata = hash => { let url = hash; //use the hash as part of the AJAX request (not implemented) fetch(data).then(res => res.json()).then(json => { content.innerHTML = ''; json.forEach(item => { content.innerHTML += `<p>${item.title}</p>`; }); }); }; document.addEventListener('DOMContentLoaded', e => { content = document.getElementById('content'); document.getElementById('btn_load').addEventListener('click', e => { location.hash = 'newstate'; }); document.getElementById('btn_reload').addEventListener('click', e => { location.reload(); }); if(location.hash){ let event = new Event('hashchange'); window.dispatchEvent(event); } }); window.addEventListener('hashchange', e => { let hash = location.hash.substring(1); fetchdata(hash); }); <button id="btn_load">Get data</button> <button id="btn_reload">Reload</button> <div id="content"></div>