localStorage阵列在刷新后被覆盖

问题描述：

所以我的localStorage值在阵列刷新后被覆盖。在会话中，我可以更改前端的值，并且localStorage中的数组会不断更新，或者如果更多的输入发生更改，则会添加更多的数组值。例如，如果我更改了3个输入并将其所有值添加到了会话中的localStorage数组中，那么在网页刷新后，如果我将再次编辑其中一个输入，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（）'是什么？在第一行有条件的情况下，使用' jdubjdub

[.setItem（）]（https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem#Return_value）不返回值。因此，在您的点击处理程序中，您总是最终将'presetsArr'设置为空数组。只需做setItem调用，不需要对预设做一个新的赋值Arr –

@PatrickEvans我从点击处理程序中删除了这些元素，现在每次改变输入时，我都会得到f.e“Frequency”键的多个数组。这并不坏，但不幸的是刷新后，如果我再次改变输入，一切都消失了。 – Limpuls

答

对于同一类问题运行任何人，这里是我碰到的解决方案。

就像Patrick Evans说的那样，尽管.setItem()没有返回任何值，但我将一个变量分配为.setItem()而犯了一个错误。所以我总是创建一个新的空数组，当我点击resfresh（在新的会话中）。但这还不够。现在我遇到了一个问题，在那里我试图将值推入不存在的数组中，并且出现null错误。我改变了我的点击处理程序：

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

|| []帮我摆脱了Null错误。尽管我在程序的顶部创建了一个空数组，但由于某种原因，在点击手柄内我无法将任何东西推送到它，所以这个小捷径帮助我检查是否有一个数组要推入，如果存在不，然后在推动之前创建一个。

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

localStorage阵列在刷新后被覆盖

相关推荐