Array Multiplying everytime adding an array in localstorage

Question

So I've made local storage that contains an array using JSON parse and stringify ("more about it here" How to store an array in localstorage)

the code running well on the first run

but in the next run, it's making multiple arrays

maybe like this : 1st run = 1 array

2nd run = 2 array

3rd run = 3 array

and so

My Code :

    function setbookmark(){
  const bokmark = document.getElementById("Bokmark")
bokmark.style.display = "block"
let bmkname = document.getElementById("name")
bmkname.setAttribute("placeholder",document.getElementById("Welcomer").innerText)

// close 
document.querySelector("#Bokmark > div.modal-dialog > div.modal-content > div.modal-header > button.close").addEventListener('click', function (e) {
    bokmark.style.display = "none"
    })

    //yes
    document.querySelector("#Bokmark > div.modal-dialog > div.modal-content > div.modal-footer > button#yes").addEventListener('click', function (e) {
    bokmark.style.display = "none"
    
    const bmk = localStorage.getItem("bmk")
    if(bmk == null){
      localStorage.setItem("bmk", "[]")
    }

    let old = JSON.parse(localStorage.getItem("bmk"))
    if(bmkname.value == ""){
      title = document.getElementById("Welcomer").innerText
      old.push({url,title})
    }else{
      let title = bmkname.value
      old.push({url,title})
    }
    localStorage.setItem("bmk",JSON.stringify(old))
  })
  }
  const bmk = JSON.parse(localStorage.getItem("bmk"))
console.log(bmk)

I don't know what is wrong with that hopefully, you guys can help me

you can add, the first answer and the second that you said is wrong — FrankSiret, Feb 16 '21 at 15:10
in which part of your code do you invoke the setbookmark() function ? — FrankSiret, Feb 16 '21 at 15:26

score 0 · Answer 1 · answered Feb 16 '21 at 15:34

Your code doesn't seem to have an error, however, if you call the setbookmark() function more than once, then you link the addEventListenet twice or more, in summary, the function of clicking yes is executed two, three, ..., n times.

One way of solution is to separate the functions, one to create the click events (which must be executed only once) and the other to open your modal

function(){
  const bokmark = document.getElementById("Bokmark")
  
  // close 
  document.querySelector("#Bokmark > div.modal-dialog > div.modal-content > div.modal-header > button.close")
  .addEventListener('click', function (e) {
    bokmark.style.display = "none"
  })

  //yes
  document.querySelector("#Bokmark > div.modal-dialog > div.modal-content > div.modal-footer > button#yes")
  .addEventListener('click', function (e) {
    bokmark.style.display = "none"
      
    const bmk = localStorage.getItem("bmk")
    if(bmk == null){
      localStorage.setItem("bmk", "[]")
    }

    let old = JSON.parse(localStorage.getItem("bmk"))
    if(bmkname.value == ""){
      title = document.getElementById("Welcomer").innerText
      old.push({url,title})
    }
    else{
      let title = bmkname.value
      old.push({url,title})
    }
    localStorage.setItem("bmk",JSON.stringify(old))
  })
}

function setbookmark(){
  const bokmark = document.getElementById("Bokmark")
  bokmark.style.display = "block"
  let bmkname = document.getElementById("name")
  bmkname.setAttribute("placeholder",document.getElementById("Welcomer").innerText)
}

const bmk = JSON.parse(localStorage.getItem("bmk"))
console.log(bmk)

Array Multiplying everytime adding an array in localstorage

1 Answers1