Le tableau localStorage est en cours d'écrasement après l'actualisation

Question

Ainsi, mes valeurs localStorage dans le tableau sont remplacées après l'actualisation. Pendant la session, je peux changer les valeurs sur front end et array dans localStorage sera constamment mis à jour ou si plus d'entrées ont changé, alors plus de valeurs à ajouter au tableau. Si par exemple j'ai eu 3 entrées changées et toutes leurs valeurs ont été ajoutées au tableau localStorage dans la session puis après l'actualisation de page Web si je modifierai une des entrées encore, tous les tableaux dans localStorage seront supprimés et écrasés par la nouvelle mise à jour de session de contribution. J'essaye de comprendre ceci pendant longtemps, mais ne peux pas comprendre comment le faire fonctionner ainsi qu'après l'actualisation toutes les valeurs d'entrée seraient stockées dans l'ancien tableau et pas écrasées.

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

Voici ce que je veux dire: Première session, j'ai changé les valeurs de fréquence et Detune, ils se sont stockés dans le tableau. Maintenant, après l'actualisation dans la deuxième session, j'ai changé à nouveau la valeur de detune et le tableau localStorage entier a été écrasé. Maintenant, la touche de fréquence est parti et seulement désaccorder à gauche. Donc après l'actualisation la prochaine fois que je veux jouer mon oscillateur, je n'obtiendrai aucun son, parce que la valeur de fréquence dans le tableau a été enlevée.

http://imgur.com/crTywnN

Answer 1

Pour tous ceux en cours d'exécution dans le même genre de problème, voici la solution que je suis tombé. Comme l'a dit Patrick Evans, j'ai fait une erreur en affectant .setItem() à une variable, même si .setItem() ne renvoie aucune valeur. Donc, je crée toujours un nouveau tableau vide quand je clique après le resfresh (dans la nouvelle session). Mais ce n'est pas assez. Maintenant je courais dans un problème, où j'essayais de pousser des valeurs dans le tableau inexistant et obtenant l'erreur null. J'ai changé mon gestionnaire de clic pour:

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

|| [] m'a aidé à me débarrasser de l'erreur Null. Même si j'ai créé un tableau vide en haut de mon programme, pour une raison quelconque à l'intérieur du clicker je ne pouvais rien y faire, donc ce petit raccourci m'a aidé à vérifier s'il y a un tableau à pousser et s'il y a pas, alors créez-en un avant de pousser.

Maintenant, je peux actualiser la page Web et continuer à modifier les valeurs d'entrée sans écraser et recréer la matrice localStorage.