覆盖本地存储而不是添加新元素 (JavaScript)答案

【问题标题】：Local Storage is overwritten instead of the new elements being added (JavaScript)覆盖本地存储而不是添加新元素 (JavaScript)
【发布时间】：2021-02-20 22:26:51
【问题描述】：

我想在本地存储中存储一组对象，但我只能将一个对象存储到数组中。所有新对象都覆盖索引 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);
});

提前致谢！！

【问题讨论】：

标签： javascript arrays class dom local-storage

【解决方案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));

【讨论】：