保存在Angular中时，本地存储阵列总是被覆盖

Question

我正在使用Angular，我正在尝试保存到本地存储中，以下代码可以很好地解决此问题。但是，当我刷新页面并尝试向本地存储阵列中添加更多项（对象）时，它实际上应该添加更多项（对象）而不是覆盖时覆盖了它吗？我哪里出问题了？

数组public playlist = [];正在通过服务在组件之间共享，这就是对象被推送到的数组。

component.ts

import { Component, OnInit } from '@angular/core';
import { PlaylistService } from '../../../services/playlist.service';
import { faSave } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-playlist-view',
  templateUrl: './playlist-view.component.html',
  styleUrls: ['./playlist-view.component.scss']
})
export class PlaylistViewComponent implements OnInit {

  faSave = faSave;

  constructor(private list: PlaylistService) { }

  ngOnInit() {
        this.list.getPlaylist();

  }
}

Playlist.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PlaylistService {

  public playlist = [];

  savePlaylist() {
    this.playlist = JSON.parse(localStorage.getItem('playlist'));
    localStorage.setItem('playlist', JSON.stringify(this.playlist));
    console.log('Saved', this.playlist);
  }

  getPlaylist() {
    if (localStorage.getItem('playlist') == null) {
      this.playlist = [];
    } else {
      this.playlist = JSON.parse(localStorage.getItem('playlist'));

    }
  }

  constructor() { 
  }
}

Answer 1

您看到的是压倒性的行为，根据给定的代码，这是正确的。与保存在localstore中一样，您将获取已经存储在localstore中的内容，然后将其分配给playlist，然后再次保存存储在playlist中的localstore。

您需要先将playlist保存在localstore中，然后将其分配给类别级别playlist。

savePlyaList函数应如下，

Playlist.service.ts

savePlaylist() {
    // first save the data 
    localStorage.setItem('playlist', JSON.stringify(this.playlist));
    // get what is saved afterwords
    this.playlist = JSON.parse(localStorage.getItem('playlist'));
    console.log('Saved', this.playlist);
}