localStorage array is being overwritten after refresh

Question

So my localStorage values in array are being overwritten after the refresh. While in session, I can change values on front end and array in localStorage constantly will be updated or if more inputs changed, then more values to array added. If for example I had 3 inputs changed and all their values was added to localStorage array in the session then after webpage refresh if I will edit one of the inputs again, all the arrays in localStorage will be deleted and overwritten by the new's session update of input. I'm trying to figure out this for a long time, but can't figure out how to make it work so that after the refresh all the input values would be stored in the old array and not overwritten.

var presetsArr = [];

if (!localStorage.getItem("presetsArr") || localStorage.getItem("presetsArr").length < 0) {
  init();
} else {
  initIfLocalStorage();
}
function initIfLocalStorage () {
presetsArr = JSON.parse(localStorage.getItem('presetsArr'));

  for (var i = 0; i < presetsArr.length; i++) {
    if (presetsArr[i].freq) {
    osc.frequency.value = presetsArr[i].freq;
    freqSlider.value = presetsArr[i].freq;
    freqDisplay.innerHTML = freqSlider.value;
    }
    if (presetsArr[i].detune) {
    osc.detune.value = presetsArr[i].detune;
    detuneSlider.value = presetsArr[i].detune;
    detuneDisplay.innerHTML = detuneSlider.value;
    }
    if (presetsArr[i].gain) {
    volume.gain.value = presetsArr[i].gain;
    }
  }

freqSlider.addEventListener("click", function(e) {
    osc.frequency.value = this.value;
    freqDisplay.innerHTML = this.value;
    bookmark["freq"] = osc.frequency.value;
    presetsArr.push(bookmark);
    presetsArr = localStorage.setItem("presetsArr", JSON.stringify(presetsArr)) || [];
  })

  detuneSlider.addEventListener("click", function(e) {
    osc.detune.value = this.value;
    detune.innerHTML = this.value;
    bookmark["detune"] = osc.detune.value;
    presetsArr.push(bookmark);
    presetsArr = localStorage.setItem("presetsArr", JSON.stringify(presetsArr)) || [];
  })

Here is what I mean: First session, I changed both frequency and detune values, they got stored in the array. http://imgur.com/0GIeQPj

Now after refresh in the second session, I changed the detune value again and the whole localStorage array got overwritten. Now frequency key is gone and only detune left. So after refresh next time I want to play my oscillator, I won't get any sound out of it, because frequency value in the array was removed.

http://imgur.com/crTywnN

Answer 1

For anyone running in the same kind of problem, here is the solution I came across.

So like Patrick Evans said, I made a mistake by assigning .setItem() to a variable, even though .setItem() doesn't return any value. So I just always create a new empty array when I click after the resfresh (in the new session). But that is not enough. Now I was running into a problem, where I was trying to push values into non-existing array and getting null error. I changed my click handler to:

presetsArr = JSON.parse(localStorage.getItem('presetsArr')) || [];
    presetsArr.push(bookmark);
    localStorage.setItem("presetsArr", JSON.stringify(presetsArr));

|| [] helped me to get rid of Null error. Even though I created en empty array at the top of my program, for some reason inside the click hander I couldn't push anything to it, so this little shortcut helped me to check if there is an array to push to and if there is not, then create one before pushing.

Now I can refresh the webpage and continue changing input values without overwriting and recreating localStorage array.

Answer 2

Спасибо тебе! День убил на эту проблему, но благодаря твоего ответу я её решил! (плюс н)