Tengo una página web que se encuentra en algún estado actualmente, es decir, se muestran algunos divs y otros están ocultos. Estoy usando cookies para publicar datos en scripts CGI de Python. Entonces, ahora, cuando hago clic en un botón, quiero que envíe datos al archivo cgi de python, y por lo tanto, quiero que el botón vuelva a cargar la página, para que, debido a la recarga, la cookie pueda actualizarse y, por lo tanto, la cookie actualizada puede ser enviado al archivo python-cgi. (Además, estoy usando iframe para mostrar el archivo python-cgi dentro de mi página web html). Ahora, los métodos como location.load() no funcionan, ya que vuelve a cargar la página web en el estado inicial donde estaban ocultos todos mis divs, pero quiero que esté en el mismo estado que antes de volver a cargar donde se mostraban algunos divs y algunos estaban escondidos. ¿Cómo puedo lograr eso? ¡Por favor ayúdame con eso! ¡Gracias!
Hay dos soluciones que se me ocurren para este problema:
Puede escribir una función de JavaScript para cuando se hace clic en el botón. Y otro para cuando se carga la página. Con la API localStorage , puede guardar el estado actual de la página.
function buttonClickedEvent() { const div1Visible = !document.querySelector('#div1').hidden || true; const div2Visible = !document.querySelector('#div2').hidden || true; const userInput = document.querySelector('#user-input').value || ''; localStorage.setItem('page-state', JSON.stringify({ div1Visible, div2Visible, userInput })); window.location.href = '/path/on/server'; } function setupPage() { const state = localStorage.getItem('page-state'); let stateObj; try { stateObj = JSON.parse(state); } catch (e) { return; } document.querySelector('#div1').hidden = !stateObj.div1Visible; document.querySelector('#div2').hidden = !stateObj.div2Visible; document.querySelector('#user-input').value = stateObj.userInput; }Con el siguiente HTML:
<body onload='setupPage()'> <button onClick='buttonClickedEvent()'> Click Me </button> </body>Lo que le recomendaría que haga en su lugar es reescribir el código de su servidor de manera que sea una API REST, en lugar de usar redireccionamientos HTTP. Luego, en la interfaz, en lugar de cambiar la página, usa una biblioteca como Axios para crear solicitudes HTTP:
axios.get('/path/on/server', (response) => { if (response.status === 200) { // HTTP success // Code to run upon successful response } });Por favor, hágamelo saber si hay algo que le gustaría que aclare.