<button id="showlinks" onclick="myFunction">show</button> <div id="buttonlinks"></div> function myFunction() { var button = document.createElement("button"); document.getElementById("buttonlinks").appendChild(button); }Usé este código para crear botones al hacer clic en un botón. al hacer clic en el botón Mostrar, aparecen los botones, pero después de la actualización desaparecen.
¿Puedo almacenar los botones con localStorage?
Puede almacenar la información sobre sus botones en localStorage cada vez que crea un botón y agregar un eventListener a window.onload para leer los botones de localStorage y agregarlo a la página cuando la página se haya cargado, en el siguiente ejemplo para mantenerlo simple , solo almaceno la longitud de los botones.
<button id="showlinks" onclick="myFunction">show</button> <div id="buttonlinks"></div>js:
let buttonsLength = 0; document.getElementById('showlinks').addEventListener('click', function () { createButton(); buttonsLength++; localStorage.setItem('buttonsLength', buttonsLength) }); function createButton() { var button = document.createElement('button'); button.innerHTML = 'click me'; document.getElementById('buttonlinks').appendChild(button); } window.addEventListener('load', (event) => { buttonsLength = Number(localStorage.getItem('buttonsLength')) || 0; for (let i = 0; i < buttonsLength; i++) { createButton(); } }); const showlinks = document.getElementById('showlinks') showlinks.addEventListener("click", function () { localStorage.setItem("showClicked", true) displayButtonInDom() }) function displayButtonInDom() { const showClicked = localStorage.getItem("showClicked") if (showClicked) { const button = document.createElement("button"); button.innerText = "click me" document.getElementById("buttonlinks").appendChild(button); } } displayButtonInDom() <button id="showlinks">show</button> <div id="buttonlinks"></div>Botón Foreache creado, debe agregar la información del botón al almacenamiento local. Y en la carga de la página, ejecuta una función de inicio que reconstruye todos los botones creados desde el almacenamiento local
<button id="showlinks" onclick="createButton('')">show</button> <div id="buttonlinks"></div> <script> function Initbutton() { //on load check if the button has been already add using the localStorage var buttons = getButtonInformationFromLocalStorage(); if(buttons != null){ buttons.forEach(function(btnName){ createButton(btnName); }) } } // fo the purpose of having different button name // i have picket this function here https://www.codegrepper.com/code-examples/javascript/find+random+name+javascript function getRandomString(length) { var randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var result = ''; for ( var i = 0; i < length; i++ ) { result += randomChars.charAt(Math.floor(Math.random() * randomChars.length)); } return result; } function createButton(btnName){ if(btnName == undefined || btnName == ""){ btnName = "button" + getRandomString(10); updateButtonInformationToLocalStorage(btnName); } var button = document.createElement("button"); button.innerHTML = btnName; document.getElementById("buttonlinks").appendChild(button); } function updateButtonInformationToLocalStorage(name){ var lstrg = localStorage.getItem("alreadyaddbuttontobuttonlinks"); if(lstrg == null){ localStorage.setItem("alreadyaddbuttontobuttonlinks", name); return name; }else{ var nLstrg = lstrg + "|" + name; localStorage.setItem("alreadyaddbuttontobuttonlinks", nLstrg); return nLstrg; } } function getButtonInformationFromLocalStorage(){ var lstrg = localStorage.getItem("alreadyaddbuttontobuttonlinks"); if(lstrg == null){ return null; }else{ return lstrg.split("|"); } } window.onload = Initbutton(); </script>