localalstorage перезаписывает после обновления

Question

Итак, у меня есть файл json, UID обозначает userID

    const ChartData = {
     dayId: this.dayId,
     calories: this.burned,
     date: this.jstoday
    };

    this.dataService.setData(this.Uid, ChartData);

Я сохраняю данные в localalstorage с использованием dataService. Где я создаю пустой массив (ChartTable) и сохраняю этот массив в localalstorage с ключом userID. И каждый раз, когда пользователь добавляет данные в хранилище, я помещаю его данные в Таблица ChartData.

import { Injectable } from "@angular/core";
import { Storage } from "@ionic/storage";

@Injectable({
  providedIn: "root"
})
export class DataService {

  private data = [];
  private ChartTable = [];

  constructor(private storage: Storage) { }

  setData(Uid, data) {

    this.data[Uid] = data;


    this.SaveData(Uid, this.data[Uid]);

  }

  getData(id) {
    return this.data[id];
  }

  SaveData(Uid, data) {
    //Pushing eachDay's data to table
    this.ChartTable.push(data);

    //Need to stringify to work
    this.storage.set(Uid, JSON.stringify(this.ChartTable));
    // Or to get a key/value pair
  }
 }

Когда я продолжаю добавлять элементы в массив, они помещаются в массив ChartTable и он работает правильно. Затем я перехожу на страницу профиля, проверяю локальное хранилище и показываю диаграмму пользователю.

import { Component, OnInit, ViewChild } from '@angular/core';
import chartJs from 'chart.js';
import { Auth2Service } from 'src/app/services/auth2.service';
import { Storage } from '@ionic/storage';
import { Calendar } from '@ionic-native/calendar/ngx';
import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
import { ActivatedRoute } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';


@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],


})
export class ProfilePage implements OnInit {

  @ViewChild('barCanvas') barCanvas;

  ChartData = [];
  ChartDataLength: any;

  public val: any;
  private Uid: string;

  Calories = [];
  Dates = [];
  BackgroundColors = [];

  barChart: any;

  today = new Date();
  followingDay = new Date();

  jstoday = '';

  constructor(
    private afAuth: AngularFireAuth,
    public auth: Auth2Service,
    private localNotifications: LocalNotifications,
    private calendar: Calendar,
    private route: ActivatedRoute,
    private storage: Storage

  ) {

  }

  ngOnInit() {

    this.checkForUser();

    // Schedule a single notification
    this.localNotifications.schedule({
      text: 'Delayed ILocalNotification',
      trigger: { at: new Date(new Date().getTime() + 3600) },
      led: 'FF0000',
      sound: null
    });

    this.calendar.createCalendar('MyCalendar').then(
      (msg) => { console.log(msg); },
      (err) => { console.log(err); }
    );

  }

  getChart(context, chartType, data, options?) {
    return new chartJs(context, {
      data,
      options,
      type: chartType
    })
  }

  getBarChart(Calories, Dates, BackgroundColors) {

    const data = {
      labels: Dates,
      datasets: [{
        label: 'number of calories you burned',
        data: Calories,
        backgroundColor: BackgroundColors,
        borderWidth: 1
      }]
    };

    const options = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }],
        xAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }

    return this.getChart(this.barCanvas.nativeElement, 'bar', data, options);

  }

  checkForUser() {

    this.afAuth.authState.subscribe(user => {

      if (user) {
        this.Uid = user.uid;

        this.val = this.storage.get(this.Uid).then((val) => {

          this.ChartData = JSON.parse(val);

          if (this.ChartData != null) {

            this.ChartData = Object.keys(this.ChartData).map(key => ({ type: key, value: this.ChartData[key] }));

            this.ChartDataLength = this.ChartData.length;

            for (let i = 0; i < this.ChartDataLength; i++) {
              this.Calories[i] = this.ChartData[i].value.calories;
              this.Dates[i] = this.ChartData[i].value.date;
              this.BackgroundColors[i] = 'rgb(0, 249, 186   )';
            }

            this.barChart = this.getBarChart(this.Calories, this.Dates, this.BackgroundColors);

          }

        });
      }
    });

  }

  logoutUser() {
    this.auth.logoutUser();
  }
}

Проблема в том, что когда я обновляю страницу и добавляю другой элемент в ChartTable, он перезаписывается и на диаграмме отображаются только новые данные. Вы знаете, как я могу решить эту проблему?

Answer 1

Когда вы перезагружаете приложение, ваше приложение повторно инициализируется, и все ваши существующие данные удаляются из памяти. Поэтому вам необходимо сбросить его обратно в ChartTable вашего DataService. Вы можете сделать это сразу после возвращения из местного хранилища.

if (this.ChartData != null) {

            this.ChartData = Object.keys(this.ChartData).map(key => ({ type: key, value: this.ChartData[key] }));

            this.ChartDataLength = this.ChartData.length;
            this.dataService.ChartTable = this.ChartData;

          }

Вам необходимо внедрить DataService в ваш компонент, и вам нужно либо написать getter и setter на ChartTable, либо сделать его общедоступным.