亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

本地存儲被覆蓋,而不是添加新元素(JavaScript)

本地存儲被覆蓋,而不是添加新元素(JavaScript)

小怪獸愛吃肉 2023-07-20 16:03:58
我想在本地存儲中存儲一組對象,但我只能將一個對象存儲到該數組中。所有新對象都會覆蓋索引 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);});提前致謝??!
查看完整描述

1 回答

?
catspeake

TA貢獻1111條經驗 獲得超0個贊

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


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));


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 164 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號