How to use local storage on append child

Admin 1
Viewed 150
<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?

css html javascript
3 Answers

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>

user_88987600

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

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