如何在附加子項上使用本地存盤

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

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

我使用此代碼在單擊按鈕時創建按鈕。單擊顯示按鈕時，按鈕出現，但重繪 后它們消失了。

我可以用localStorage 存盤按鈕嗎？

uj5u.com熱心網友回復：

您可以在localStorage每次創建按鈕時存盤有關按鈕的資訊，并添加一個 eventListener 來window.onload讀取按鈕localStorage并將其在頁面加載時附加到頁面中，在下面的示例中，為了簡單起見，我只存盤按鈕的長度。

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

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

Foreache 按鈕創建后，您必須將按鈕資訊添加到本地存盤中。在頁面加載時，您執行一個 init 函式，該函式重建從 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>

標籤：javascript html css

上一篇：如何修復引導程式中的行、列布局

下一篇：懸停效果不適用于z-index較低的元素