Tengo dos páginas html. Desde la página 1 puedo ir a la página 2 y desde la página 2 puedo volver a la página 1.
En la página 1 tengo un botón que muestra una imagen. Cuando voy a la página 2 y vuelvo a la página 1, mi imagen desaparece. ¿Hay alguna manera de no perder lo que hice en la página 1 cuando vuelvo a ella?
<html> <head> <title> Onclick javascript to make browser go back to previous page? </title> </head> <body> <button onClick="showImage()">Button</button> <div id="first" style="height:200px; width:200px; display:none;"> <img src="PP.jpg"/> </div> <script> const showImage = () => { document.getElementById("first").style.display ='block'; } </script> <h1 style="color: green"> GeeksforGeeks </h1> <b> Onclick javascript to make browser go back to previous page? </b> <h2>Page 1</h2> <p> Click on the link to get to the second page. </p> <a href="Page2.html">Go to Page 2</a> </body> </html>Actualmente estoy usando onclick="history.back()" para actualizar mi página de inicio y eliminar la imagen
<!DOCTYPE html> <html> <head> <title> Onclick javascript to make browser go back to previous page? </title> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> Onclick javascript to make browser go back to previous page? </b> <h2>Page 2</h2> <p> Click on the button to go back to the previous page. </p> <button onclick="history.back()"> Click here to go back </button> </body> </html>Debe guardar el estado en un almacenamiento, por ejemplo, un sessionStorage . Puede manejarlo con el onload Event .
Debe guardar el estado en el almacenamiento cuando se hace clic en el botón para mostrar la imagen. Y cuando la página se vuelva a cargar, verifique si se hace clic en el botón, si es así, muestre el contenedor; de lo contrario, no se mostrará.
const showImage = () => { sessionStorage.setItem('showImage', 'true'); document.getElementById("first").style.display ='block'; } function myFunction() { if (sessionStorage.getItem('showImage') === 'true') { document.getElementById("first").style.display ='block'; sessionStorage.removeItem('showImage'); } }en la etiqueta del cuerpo agrega esto:
<body onload="myFunction()">Por ejemplo: https://jsfiddle.net/dn09ysa1/
Puedes usar sessionStorage :)
const showImage = () => { document.getElementById("first").style.display ='block'; sessionStorage.setItem("imageState", "visible"); } (sessionStorage.getItem("imageState") === "visible" ? document.getElementById("first").style.display ='block' : document.getElementById("first").style.display ='none');