Angular, потеря данных при обновлении страницы

Question

У меня небольшой вопрос в Angular.

У меня есть кнопка в компоненте, которая при нажатии выбирает игру и запускает функцию, и эта функция просто отправляет игру в службу с именем SelectedGameService , чтобы я мог понять, какая игра была выбрана. Вот мои коды;

Кнопка в 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>

Как я уже сказал, функция handleDetails (game) отправляет игра для этой функции. Эта функция handleDetails в game.component.ts:

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

Эта функция отправляет игру в selectedGameService. вот мои коды в этой службе;

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

Итак, по сути, эта служба создает новую игру и приравнивает ее к игре, которая запустила функцию handlePrice (game) .

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

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

С этого момента спасибо.

Перед обновлением страницы

После обновления страницы

Answer 1

Данные, хранящиеся в переменных в службах, будут очищены при обновлении браузера. Один из способов решить эту проблему - использовать сеанс или локальное хранилище для хранения данных:

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

Для извлечения данных из локального хранилища:

localStorage.getItem('key');

Answer 2

Данные, которые вы храните в службе, находятся в памяти. Когда вы обновляете sh страницу, браузер освобождает память и дает вашему приложению чистый лист для записи.

Если вы хотите поддерживать состояние при обновлении страницы, вам следует go для localStorage для сохранения ваших данных.

Процесс, которому вы должны следовать:

1. Каждый раз, когда вы вызываете свою службу для сохранения состояния, ваша служба должна внутренне сохраните его в localStorage .
2. Когда вы обновляете sh страницу, вы должны сначала проверить, присутствует ли какое-то состояние уже в localStorage или нет. Если это так, вы должны получить эти данные и заполнить таблицу, в противном случае начните с начала.

Вы можете прочитать о localStorage здесь