角度，页面刷新时数据丢失

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) 函数将游戏发送到该函数。 game.component.ts 中的 handleDetails 函数是；

handleDetails(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) 函数的游戏。

这是我的问题。当我运行代码时，它在浏览器中完美运行。当我按下“查看游戏详细信息”按钮时，我可以看到我想要的页面，但是当我在该页面刷新浏览器时，游戏的所有信息都会消失。我该如何解决这个问题？

您可以看到我在该页面刷新浏览器时的前后图片。

从现在开始谢谢你。

刷新页面之前

刷新页面后

Answer 1

刷新浏览器时，服务中变量中存储的数据将会被清除。解决此问题的一种方法是使用会话或本地存储来存储数据：

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

从本地存储检索数据：

localStorage.getItem('key');

Answer 2

您存储在服务中的数据驻留在内存中。当您刷新页面时，浏览器会释放内存并为您的应用程序提供一个可以书写的干净状态。

如果您想在页面刷新时保持

状态，您应该使用localStorage来保存数据。

您应该遵循的流程是：

每当您调用服务来保存状态时，您的服务都应在内部将其保存到
1. localStorage。
刷新页面时，应首先检查
2. localStorage中是否已存在某些状态。如果是，那么您应该获取该数据并填充表，否则从头开始。

您可以从这里阅读有关 localStorage 的信息

Answer 3

您可以使用

本地存储 / 会话存储。

服务中存储的任何数据都会在页面重新加载时丢失，如果您使用本地存储/会话存储，则存储该数据会变得更容易 以这样的方式创建逻辑，在页面完全重新加载之前，您可以使用这些存储来获取数据和组件相应地工作。