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

來源

2017-08-16 Limpuls

你的'init（）'是什麼？在第一行有條件的情況下，使用'<0'比較器很奇怪 - 這將始終是錯誤的。 – 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數組。

來源

2017-08-16 21:41:03 Limpuls

localStorage陣列在刷新後被覆蓋

回答

相關問題