Bueno yo tengo este codigo que cambia los colores de una celda, pero lo que busco es que no borre los resultados cuando reinicio la pagina, porque estoy haciendo una pagina para que los usuarios marquen las horas que TENGO DISPONIBILIDAD SEMANAL.
No se si alguien me puede ayudar, a guardar esos valores, gracias.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script language="javascript" type="text/javascript"> function ilumina(celda){ if (celda.style.backgroundColor=="yellow") { celda.style.backgroundColor="green"; } else { celda.style.backgroundColor="yellow"; } } </SCRIPT> </head> <body> <table border="1" width="50%"> <tr> <td bgcolor="green" onclick="ilumina(this)"> </td> <td bgcolor="green" onclick="ilumina(this)"> </td> <td bgcolor="green" onclick="ilumina(this)"> </td> <td bgcolor="green" onclick="ilumina(this)"> </td> </tr> </table> </body> </html>Puedes usar
Puede guardar sus datos cada vez que cambia los colores, luego, al cargar la página, puede verificar si ha guardado previamente algún dato. En caso afirmativo, cargue los datos y cambie los colores.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script language="javascript" type="text/javascript"> //DOMContentLoaded = when page elements are loaded document.addEventListener("DOMContentLoaded", function(event) { //check if we have saved any 'celda_storage_localstorage' value if ( localStorage.getItem('celda_storage_localstorage') != null ) { celda_storage = JSON.parse( localStorage.getItem('celda_storage_localstorage') ); //load colors from celda_storage for (let i=0; i < celda_storage.length; i++) { document.querySelectorAll('#celdas_table td')[i].style.backgroundColor = celda_storage[i]; } } }); function ilumina(celda){ if (celda.style.backgroundColor=="yellow") { celda.style.backgroundColor="green"; } else { celda.style.backgroundColor="yellow"; } //save colors to celda_storage for (let i=0; i < document.querySelectorAll('#celdas_table td').length; i++) { celda_storage[i] = document.querySelectorAll('#celdas_table td')[i].style.backgroundColor; } console.log(celda_storage); //JSON.stringify = array to string localStorage.setItem('celda_storage_localstorage',JSON.stringify(celda_storage)); //JSON.parse = string to array console.log( JSON.parse( localStorage.getItem('celda_storage_localstorage') ) ); } </SCRIPT> </head> <body> <table id="celdas_table" border="1" width="50%"> <tr> <td style="background-color : green" onclick="ilumina(this)"> </td> <td style="background-color : green" onclick="ilumina(this)"> </td> <td style="background-color : green" onclick="ilumina(this)"> </td> <td style="background-color : green" onclick="ilumina(this)"> </td> </tr> </table> </body> </html>¡Diviértete y pregunta!
Si lo hago con almacenamiento local, solo guarda la información para mi navegador. Creo que necesito enviar la información al backend, pero con mi conocimiento no sé cómo hacerlo.