angularjs - Angular, pierderea datelor la reîmprospătarea paginii

Am o mică întrebare despre Angular.

Am un buton într-un component care, când este apăsat, selectează un joc și rulează o funcție, iar acea funcție doar trimite jocul către un serviciu numit SelectedGameService, astfel încât să pot înțelege care joc a fost selectat. Iată codurile mele;

Butonul din games.component.html;

<a class="btn btn-primary" (click)="handleDetails(game)" style="position: absolute; top:86%; background-color: #0909CD;" routerLink="/games/game-details/{{game.title}}">See The Game Details</a>

Așa cum am spus, funcția handleDetails(game) trimite jocul către acea funcție. Acea funcție handleDetails din game.component.ts este;

handleDetails(game) {
    this.selectedGameService.selectedGame = game;
  }

Acea funcție trimite jocul către selectedGameService. Iată codurile mele din acel serviciu;

import { Injectable } from '@angular/core';
import { Games } from '../games/Games';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http'; 

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

  selectedGame: Games;
  constructor(private http: HttpClient) { 
    this.selectedGame = new Games;
  }

Deci, practic, acest serviciu creează un joc nou și îl egalează cu jocul care a declanșat funcția handlePrice(game).

Iată problema mea. Când rulez codul, acesta rulează perfect în browser. Când apăs butonul „Vezi detaliile jocului”, pot vedea pagina așa cum îmi doresc, dar când reîncarc browserul în timp ce sunt pe acea pagină, toate informațiile jocului dispar. Cum pot rezolva această problemă?

Poți vedea pozele de dinainte și după când reîmprospătez browserul în timp ce sunt pe acea pagină.

Mulțumesc de acum.

Înainte de a reîncărca pagina

După reîmprospătarea paginii

Răspuns #1

Datele stocate în variabile în servicii vor fi șterse dacă browserul este reîmprospătat. O modalitate de a rezolva acest lucru este utilizarea stocării pe sesiune sau locale pentru a păstra datele:

    handleDetails(value) {
      localStorage.setItem('key', value);
      }

Pentru a prelua date din stocarea locală:

localStorage.getItem('key');

Răspunsul #2

Datele pe care le stocați într-un serviciu se află în memorie. Când reîmprospătați pagina, browserul eliberează memoria și oferă aplicației dvs. o tablă curată pe care să scrie.

Dacă vrei să menții starea între reîncărcările paginii, ar trebui să optezi pentru localStorage pentru a-ți salva datele.

Procesul pe care ar trebui să-l urmați este:

1. Ori de câte ori apelezi serviciul tău pentru a salva starea, serviciul tău ar trebui să o salveze intern în localStorage.
2. Când reîmprospătați pagina, ar trebui mai întâi să verificați dacă există deja un anumit stare în localStorage sau nu. Dacă există, atunci ar trebui să obțineți acele date și să completați tabelul, altfel începeți de la început.

Poți citi despre localStorage de aici