No hay problema con un elemento. Necesito hacer al menos 10 botones y que no dependan unos de otros. Es decir, algunos botones estaban con texto oculto y otros con texto abierto.
¿Cuál es la mejor manera de hacer esto para que el código no se vea como un monstruo?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> #myid { display: none; } </style> <button onclick="onclickmyid()">Open</button><br><br><span id="myid">Hidden text</span> <script> var myid = document.getElementById('myid'); function onclickmyid() { myid.style.display = (myid.style.display == 'block') ? '' : 'block'; localStorage.setItem('conceal', myid.style.display); } if(localStorage.getItem('conceal') == 'block') { document.getElementById('myid').style.display = 'block'; } </script> </body> </html>Coloque todos los datos persistentes que necesita en una matriz o un objeto, luego serialice esa matriz u objeto (único) en una única clave de almacenamiento local. Algo en la línea de
const config = localStorage.config ? JSON.parse(localStorage.config) : defaultConfig; // define defaultConfig earlier cons saveConfig = () => localStorage.config = JSON.stringify(config); // then, to save to the config when a change is made: function onclickmyid() { const newShow = myid.style.display === ''; config.myid = newShow; updateUI(); saveConfig(); } // and retrieve values on pageload: const updateUI = () => { myid.style.display = config.myid ? 'block' : ''; // etc for other elements }; updateUI(); También recomiendo encarecidamente evitar los controladores en línea, ya que se consideran universalmente una práctica bastante terrible en la actualidad: adjunte los oyentes correctamente utilizando addEventListener de JavaScript en su lugar siempre que sea posible.
Para botones adicionales, simplemente agregue más propiedades al objeto de config y alterne y acceda a ellos en los controladores de clic.