Tengo una función para resaltar palabras:
// This is to read previews highlights when user reload the page var myContent = localStorage.getItem("text"); // it not highlight the previews texts for(var i = 0; i < myContent.rangeCount; i++) { highlightRange(myContent.getRangeAt(i)); } function myFunction() { var userSelection = window.getSelection(); //localStorage.setItem("text", userSelection); // save to localstorage for(var i = 0; i < userSelection.rangeCount; i++) { highlightRange(userSelection.getRangeAt(i)); } } function highlightRange(range){ span = document.createElement("span"); span.appendChild(range.extractContents()); span.setAttribute("style","background:#ffc570;"); range.insertNode(span); } <button type="button" id="myCheck" onClick="myFunction()";>Click to highlight</button> <br> <div>Some text to highlight</div>Me gustaría guardar en localstorage todos los aspectos destacados para volver a mostrarlos después de que el usuario vuelva a cargar la página. El problema es que los resaltados desaparecen después de recargar la página. ¿Que estoy haciendo mal?
(Tenga en cuenta que comento el setItem solo para hacer que el fragmento de código funcione porque el almacenamiento local no está permitido en él).
¡Puede crear una clase que cambie el color de fondo a amarillo y seleccionar esa clase usando una función de javascript!
HTML:
<div class = "highlight">Some text to highlight</div> <button onclick = "highlight()">Click to highlight</button>CSS:
.text_highlighted{ background-color: yellow; height: fit-content; width: fit-content; }JS:
function highlight(){ const text = document.querySelector('.highlight'); text.classList.toggle("text_highlighted"); } También puede verificar esto en codepen: https://codepen.io/HaibaoM/pen/rNpQRMx
¡Espero que ayude!