Angular, локальная настройка, как вызывать ключи автоматически

Question

Я хочу сохранить данные в локальном хранилище, чтобы не потерять их при обновлении страницы.

В моем html файле есть кнопка, которая запускает эту функцию из файла машинописного текста (функция имеет paramater под названием 'game', это класс, который я создал);

  handlePrice(game) {
    //HERE I CALL THE FUNCTION SETGAME OF GAMESERVICE
    this.selectedGameService.setGame(game);
  }

Как вы все можете видеть, эта функция вызывает другую функцию с именем setGame из selectedGameService. Вот коды этой службы:

      export class SelectedGameService {

  selectedGame: Games;  //SELECTEDGAME IS AN ELEMENT FROM GAMES CLASS
  constructor(private http: HttpClient) { }

  setGame(game: Games) {
    
    //FIST, I CHECK IF THE KEY 'theGame' IS EMPTY OR NOT AT LOCAL STORAGE
    if(localStorage.getItem('theGame') === null) {
      //IF THE KEY IS EMPTY, I SET SELECTEDGAME AS THE NEW INCOMING GAME
      //AND STORE THE GAME AT LOCAL STORAGE WITH THE KEY 'theGame'
      this.selectedGame = game;
      localStorage.setItem('theGame', JSON.stringify(this.selectedGame));
    }
    else {
      //IF THERE IS AN EXISTING GAME IN LOCAL STORAGE ALREADY
      //I SET THE SELECTEDGAME AS THE GAME IN THE KEY 'theGame'
      this.selectedGame = JSON.parse(localStorage.getItem('theGame'));
    }
  }
}

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

Answer 1

Попробуйте это.

 ngOnInit() {
    if (localStorage.getItem('theGame')) {
      this.selectedGame = JSON.parse(localStorage.getItem('theGame')); // use existing localstorage value
    } else {
      this.setGame(value);    // set your new game value
    }

  }

setGame(game: Games) {
   const tempGame = JSON.stringify(game);
   if (!localStorage.getItem('theGame') || (tempGame !== localStorage.getItem('theGame'))) {
       localStorage.setItem('theGame', tempGame);
       this.selectedGame = game; 
}
  }

Примечание: если localstorage не имеет значения для 'theGame' или уже сохраненное значение отличается от текущего переданного значения, установите текущее значение на localstorage. В противном случае просто используйте текущее значение this.selectedGame.