本地存儲被覆蓋而不是添加新元素（JavaScript）

Question

我想在本地存儲中存儲一組對象，但我只能將一個對象存儲到該數組中。 所有新對象都覆蓋索引 0 中的前一個對象。

這是我的 JavaScript 代碼：

class Track {

    constructor (title, genre) {
        this.title    = title;
        this.genre    = genre;        
        this.id       = new Date().getTime();
        this.creation = new Date();
    }
}

class TrackList {

    constructor () {
        this.tracks = [];
    }

    newTrack(track) {
        this.tracks.push(track);
        this.saveLocalStorage();
    }

    saveLocalStorage() {
        localStorage.setItem('tracks', JSON.stringify(this.tracks));
    }
}

const addSongForm = document.querySelector('.addSongForm');


addSongForm.addEventListener('submit', (e) => {
    const songTitle = document.querySelector('.songTitle').value;
    const songGenre = document.querySelector('.songGenre').value;

    const newTrackForm = new Track(songTitle, songGenre);

    const trackList = new TrackList();
    trackList.newTrack(newTrackForm);
});

提前致謝！！

Answer 1

首先獲取本地存儲的當前內容，然后將新對象放入數組中。

var currentTracks = localStorage.getItem('tracks');
localStorage.setItem('tracks', JSON.stringify(JSON.parse(currentTracks).concat(this.tracks)));

編輯：如果需要替換與新對象具有相同 ID 的當前對象，則需要調整新數組。

/**
 * source : https://www.cnblogs.com/water-1/p/10780528.html
 */
function mergeArray(arr1,arr2){
    var _arr = new Array();
    for(var i=0;i<arr1.length;i++){
       _arr.push(arr1[i]);
    }
    for(var i=0;i<arr2.length;i++){
        var flag = true;
        for(var j=0;j<arr1.length;j++){
            if(arr2[i]['id']==arr1[j]['id']){
                flag=false;
                break;
            }
        }
        if(flag){
            _arr.push(arr2[i]);
        }
    }
    return _arr;
}

var currentTracks = JSON.parse(localStorage.getItem('tracks'));
localStorage.put('tracks', mergeArray(this.tracks, currentTracks));