Local Storage does not work after refresh using Angular2 in-memory-data

Question

I am following this library: https://github.com/PillowPillow/ng2-webstorage

My base project is adapted from Tours of Heroes

Currently, I am able to save the values in a local storage and retrieve them using webstorage. However, after refresh, my values revert to the old ones which were stored in in-memory-data.service.ts

bot.component.html:

<tr *ngFor="let bot of bots" routerLink="/botlevelup/{{bot.id}}">
    <td>{{bot.id}}</td>
    <td>{{bot.lastLevel}}</td>
    <td>{{bot.secondLevel}}</td>
</tr>

in-memory-data.service.ts:

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const bots = [
     {"id":1,"lastLevel":5},
     {"id":2,"lastLevel":5},
     {"id":3,"lastLevel":5}
];
    return {bots};
  }
}

botlevelup.component.html

Bot: {{bot.id}}
Last Level: <input [(ngModel)]="bot.lastLevel" />
<button (click)="save()">Save</button>

botlevelup.component.ts

save() {
this.storage.store('boundValue', JSON.stringify(bot));
}

I can see that my updated values are stored in 'boundValue' using console log, and is still present after refresh.

How do I retrieve the updated values from 'boundValue' instead of the original in-memory-data.service.ts after a refresh?

I wanted to achieve an if else:

1. If there are changes made to bot 1 and 2, it will retrieve from 'boundValue'
2. If there are no changes made to bot 3, it will retrieve from in-memory-data.service.

Edit #1: Code snippet of the retrieval

getBots(): Observable<Bot[]> {
        this.storage.retrieve('boundValue');
      return this.http.get<Bot[]>(this.botsUrl)
      .pipe(
      catchError(this.handleError('getBots', []))
    );
  }

Answer 1

I managed to return back the table based on updated values of bots, and also old values of bots if there are no updates.

Store original values of bots in a local storage:

Snippet:

export const bots: Bot[] = [
 {"id":1,"lastLevel":5},
 {"id":2,"lastLevel":5},
 {"id":3,"lastLevel":5}
]

var local = JSON.stringify(bots);
this.storage.store('localstore', local);

Create a local storage for value updates, in the question it is boundValue which stores all the changes.

    this.storage.store('boundValue', JSON.stringify(bot));

Retrieve values from localstore and boundValue, check if there are updates in boundValue and replace localstore with updates if any.

    var newValues = this.storage.retrieve('boundValue');
    var oldValues = this.storage.retrieve('localstore ');

If there is no new values, return the old values. I use a variable 'array' for these values:

if(boundValue == null){          
  var array = $.parseJSON(oldValues);
}

Else, update the old values in the array:

    else{
      var valueUpdate = $.parseJSON('[' + newValues + ']');
      var array       = $.parseJSON(oldValues); 

      for (var i=0; i<array.length; i++){
        for (var m=0; m<valueUpdate.length; m++){
          if (valueUpdate[m].id == array[i].id){
            array[i] = valueUpdate[m];
            break;  
          }
        }
      }       
   }

Lastly:

this.bots = array;

It may not be the best way, but it is something that I could come up with. Thanks for all the comments on my question which gave me idea on how I could do it.