Esto es lo que tengo en mi archivo .pug que necesito que el sitio web recuerde. Si un usuario hace clic en el botón Grande, el sitio web debe recordarlo cuando se actualice.
.scaling scalingButton(onclick='body.style.fontSize = "1.0em"')='Normal' scalingButton(onclick='body.style.fontSize = "1.2em"')='Medium' scalingButton(onclick='body.style.fontSize = "1.5em"')='Large'y esto es lo que tengo en el archivo .css para estos botones:
.scaling{ text-align: end; position: fixed; margin: 150px; margin-right: 0%; margin-bottom: 5%; bottom: 0px; right :20%; } scalingButton{ background-color: white; padding: 5px 10px; margin-top: 600px; font-weight: bold; border-radius: 3px; border: 2px solid black; filter: drop-shadow(2px 2px 2px black); transition: 0.3s; } scalingButton:hover{ background-color: grey; cursor: pointer; }Debe escribir una función que almacene valor en localStorage y cuando se cargue la página ( DOMContentLoaded ), debe verificar localStorage, si localStorage tiene un tamaño de fuente, puede aplicarlo al cuerpo.
guion:
function changeFontSize(size) { let fontSize = size + "em" body.style.fontSize = fontSize; localStorage.setItem('font-size', fontSize); } document.addEventListener("DOMContentLoaded", function(event) { let fontSize = localStorage.getItem('font-size'); if(fontSize) { body.style.fontSize = fontSize; } });modelo
.scaling scalingButton(onclick="changeFontSize('1.0em')")='Normal' scalingButton(onclick="changeFontSize('1.2em')")='Medium' scalingButton(onclick="changeFontSize('1.5em')")='Large'