Consulte esta GithubPage donde intento recrear un problema que tuve.
Cuando haga clic en el primer botón, se creará un párrafo, se agregará a un elemento de almacenamiento local y se mostrará.
Cuando haga clic en el segundo botón, primero borrará el almacenamiento local y luego lo redirigirá a otra página.
Ahora, si hace clic en el botón Atrás del navegador desde la página 2, volverá a index.html, pero los párrafos seguirán allí. Si verifica el almacenamiento local, los párrafos se eliminan, como deberían, pero aún se muestran como si el script js no se ejecutara al volver al index.html .
Tengo este problema con Chrome y Firefox, pero Edge se comporta como esperaba (volviendo a index.html, no se muestran párrafos). Todo también funcionaba como se esperaba cuando lo probé en un servidor local en vivo, incluso con Chrome. Pero no justo en una página de GitHub. ¿Se vuelve a ejecutar el script Js al visitar una página a través del botón Atrás del navegador? Pensé que sí, pero ¿alguien puede explicar qué está pasando aquí? Gracias.
Aquí está el guión
const addPEle = document.querySelector(".addP"); const clearPEle = document.querySelector(".clearP"); const contentEle = document.querySelector(".content"); addPEle.addEventListener("click", () => { const curContent = localStorage.getItem("content") || ""; localStorage.setItem("content", `${curContent}<p>This is a paragraph.</p>`); displayContent(); }); clearPEle.addEventListener("click", () => { localStorage.setItem("content", ""); location.href = "page2.html"; // displayContent(); }); function displayContent() { contentEle.innerHTML = ""; const content = localStorage.getItem("content") || "There is no paragraph."; contentEle.innerHTML = content; console.log("from displayContent function"); console.log(`content: ${content}`); console.log(`localStorage: ${localStorage.getItem("content")}`); } displayContent();Esto se debe a que Back-Forward Cache conserva su página y su estado y no actualizará su página cuando navegue hacia atrás.
Puede usar los eventos de PageLifeCycle para verificar si su página está navegando hacia atrás y hacer una recarga si lo desea. Ver demostración https://page-lifecycle.glitch.me/ de https://github.com/GoogleChromeLabs/page-lifecycle
window.addEventListener('pageshow', (event) => { if (event.persisted) { // page was restored from the bfcach // Do your reload or re-render page with data } });