本地存储被覆盖，而不是添加新元素（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));