localstorage overwrites after refresh

manpreet Best Answer 2 years ago

So,i have a json file Uid stands for userID

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

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

i save the data on localstorage using a dataService Where i create an empty array(ChartTable) and i save this array to the localstorage with key the userID,And each time a user adds data to the storage i push his data to the ChartData table.

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
  }
 }

When i keep adding items to the array they are been pushed in the ChartTable array and its working correctly.Then i go to the profile page check the localstorage and show a chart to the user.

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

The problem is that when i refresh the page and go to add an other item to the ChartTable it gets overwritten and only the new data is shown to the chart.Do you know how can i solve this issue?

manpreet 2 years ago

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;

          }