Question

因此刷新后会覆盖数组中的localStorage值。在会话中，我可以更改前端的值，并且localStorage中的数组会不断更新，或者如果更多输入更改，则会添加更多值到数组。例如，如果我更改了3个输入并且它们的所有值都已添加到会话中的localStorage数组中，那么在网页刷新之后如果我将再次编辑其中一个输入，则localStorage中的所有数组都将被删除并被新的＆＃39;会话更新输入。我试图弄清楚这个很长一段时间，但是无法弄清楚如何使其工作，以便在刷新之后所有输入值都将存储在旧数组中而不会被覆盖。

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)) || [];
  })

这就是我的意思：第一次会话，我改变了频率和失谐值，它们存储在数组中。 http://imgur.com/0GIeQPj

现在在第二个会话中刷新后，我再次更改了detune值，整个localStorage数组被覆盖了。现在频率键消失了，只剩下了失谐。因此，在下次刷新后我想播放振荡器时，我不会发出任何声音，因为数组中的频率值已被删除。

http://imgur.com/crTywnN

Answer 1

对于遇到同类问题的人来说，这是我遇到的解决方案。

就像帕特里克·埃文斯所说的那样，我将.setItem()分配给变量时犯了一个错误，即使.setItem()没有返回任何值。所以当我在resfresh之后点击（在新会话中）时，我总是创建一个新的空数组。但这还不够。现在我遇到了一个问题，我试图将值推送到不存在的数组并且出现null错误。我将点击处理程序更改为：

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

<强> || [] 帮我摆脱了Null错误。即使我在我的程序顶部创建了一个空数组，由于某种原因，在点击处理器中我无法向它推送任何东西，所以这个小捷径帮助我检查是否有一个数组要推送到是否有不，然后在推之前创建一个。

现在我可以刷新网页并继续更改输入值，而不会覆盖和重新创建localStorage数组。

刷新后会覆盖localStorage数组

1 个答案: