localStorage 数组在刷新后被覆盖答案

【问题标题】：localStorage array is being overwritten after refreshlocalStorage 数组在刷新后被覆盖
【发布时间】：2018-01-25 01:06:00
【问题描述】：

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

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

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

http://imgur.com/crTywnN

【问题讨论】：

你的init() 是什么？第一行的条件对于< 0 比较器来说很奇怪——这总是错误的。
.setItem() 不返回值。因此，在您的点击处理程序中，您总是会将presetsArr 设置为一个空数组。只需调用 setItem 即可，无需对 presetsArr 进行新分配
@PatrickEvans 我从点击处理程序中删除了分配，现在每次更改输入时，我都会得到 f.e“频率”键的多个数组。这还不错，但不幸的是，刷新后如果我再次更改输入，一切都会再次消失。

标签： javascript arrays json object local-storage

【解决方案1】：

对于遇到相同问题的任何人，这是我遇到的解决方案。

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

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

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

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

【讨论】：