angularjs - Angular, strata údajov pri obnovení stránky

Mám malú otázku ohľadom Angular.

Mám tlačidlo v komponente, ktoré po stlačení vyberie hru a spustí funkciu a táto funkcia jednoducho odosiela hru do služby s názvom SelectedGameService, aby som vedel, ktorá hra bola vybraná. Tu sú moje kódy;

Tlačidlo v 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>

Ako som už povedal, funkcia handleDetails(game) odosiela hru tej funkcii. Táto funkcia handleDetails v súbore game.component.ts je;

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

Táto funkcia odosiela hru do selectedGameService. tu sú moje kódy v tejto službe;

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

Takže v podstate táto služba vytvorí novú hru a rovná ju hre, ktorá spustila funkciu handlePrice(game).

Tu je môj problém. Keď spustím kód, funguje to perfektne v prehliadači. Keď stlačím tlačidlo „Zobraziť podrobnosti hry“, môžem vidieť stránku tak, ako chcem, ale keď obnovím prehliadač, keď som na tej stránke, všetky informácie o hre zmiznú. Ako môžem tento problém vyriešiť?

Môžete vidieť obrázky pred a po tom, keď obnovím prehliadač, kým som na tej strane.

Ďakujem už teraz.

Pred obnovením stránky

Po obnovení stránky

Odpoveď č. 1

Dáta uložené vo variabiloch v službách budú vymazané, ak sa stránka obnoví. Jedným zo spôsobov, ako to vyriešiť, je použitie relácie alebo lokálneho úložiska na uloženie dát:

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

Na načítanie údajov z miestneho úložiska:

localStorage.getItem('key');

Odpoveď č. 2

Dáta, ktoré uložíte v službe, sa nachádzajú v pamäti. Keď obnovíte stránku, prehliadač uvoľní pamäť a dá vašej aplikácii čistý priestor na zápis.

Ak chcete udržať stav pri obnovovaní stránky, mali by ste použiť localStorage na uloženie vašich dát.

Proces, ktorý by ste mali nasledovať, je:

  1. Kedykoľvek zavoláte svoju službu na uloženie stavu, vaša služba by ho mala interne uložiť do localStorage.
  2. Keď obnovíte stránku, najprv by ste mali skontrolovať, či je už nejaký stav prítomný v localStorage alebo nie. Ak áno, mali by ste tieto údaje získať a naplniť nimi tabuľku, inak začnite od začiatku.

O lokalnom úložisku si môžete prečítať tu

Súvisiace články