<button id="showlinks" onclick="myFunction">show</button>
<div id="buttonlinks"></div>

function myFunction() {
  var button = document.createElement("button");
  document.getElementById("buttonlinks").appendChild(button);
}

I used This Code to create buttons on clicking a button. when clicking the show button the buttons appear but after refresh they are gone.

can I store the buttons with localStorage?

CodePudding user response：

You can store the information about your buttons in the localStorage whenever you create a button, and add an eventListener to window.onload to read the buttons from localStorage and append it to the page when page has loaded, in the below exmpale to keep it simple, I just store the length of buttons.

<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();
    }
});

CodePudding user response：

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>

CodePudding user response：

Foreache button created you have to add the button information to the localstorage. And on page load you execute an init function that rebuild all button created from the localstorage

<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>