添加新專案時，localStorage陣列重置

我目前正在做一個專案，我必須根據需要將盡可能多的玩家存盤到使用 localStorage 的玩家陣列中。

事實上，我可以注冊這些玩家并按照我的意愿修改他們的資料，但是當我嘗試注冊一個新玩家時，問題就出現了，其欄位重置為零的陣列。我舉個例子

我有一個注冊了玩家的陣列：

[{"name":"test","score":4,"maxScore":5}]

當我添加一個新玩家時，我的陣列變成了這樣：

[{"name":"test","score":0,"maxScore":0},{"name":"test2","score":0,"maxScore":0}]

如您所見，對于我擁有的每個玩家，score和maxScore的值都重置為 0，我不知道為什么，因為我使用 localStorage 的時間不超過 4 天

接下來我將提供我的代碼：

home.component.html

<div class="container d-flex justify-content-center align-items-center vh-100">
  <div class="row">
    <div class="card text-dark bg-dark p-5">
      <div class="card-body">
        <h2 class="mb-3">CREATE NEW PLAYER</h2>
        <input
          class="form-control"
          type="text"
          placeholder="Player name"
          name="name"
          #name
          [(ngModel)]="player.name"
        />
        <div class="d-grid gap-2">
          <button
            class="btn btn-primary mt-3"
            type="button"
            routerLink="game"
            [disabled]="player.name === ''"
            (click)="addPlayer(name)"
          >
            JOIN
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

home.component.ts

export class HomeComponentComponent implements OnInit {
  constructor(public gameService: GameService, public dataService: DataService) {}

  ngOnInit(): void {}

  player: Player = {
    name: '',
    score: 0,
    maxScore: 0,
  };

  addPlayer(name: HTMLInputElement) {
    this.gameService.addPlayer({
      name: name.value,
      score: 0,
      maxScore: 0,
    });
    this.dataService.playerName = name.value;
  }
}

游戲服務.ts

export class GameService {
  players: Player[];

  constructor() {
    this.players = [];
  }

  addPlayer(player: Player) {
    if (localStorage.getItem('players') === null) {
      this.players.push(player);
      localStorage.setItem('players', JSON.stringify(this.players));
    } else {
      let localStorageItem = JSON.parse(
        localStorage.getItem('players') || '[]'
      );
      let item = localStorageItem.find(
        (item: Player) => item.name === player.name
      );
      if (!item) {
        this.players.push(player);
        localStorage.setItem('players', JSON.stringify(this.players));
      }
    }
  }
}

PS：我正在使用Angular，但在這種情況下它不會影響專案的開發

uj5u.com熱心網友回復：

目前，如果您確實有一組播放器，并且添加了一個新播放器，則控制流程如下所示。我已經標記了在這種情況下執行的代碼行。

addPlayer(player: Player) {
>   if (localStorage.getItem('players') === null) {
      this.players.push(player);
      localStorage.setItem('players', JSON.stringify(this.players));
>   } else {
>     let localStorageItem = JSON.parse(
>       localStorage.getItem('players') || '[]'
>     );
>     let item = localStorageItem.find(
>       (item: Player) => item.name === player.name
>     );
>     if (!item) {
>       this.players.push(player);
>       localStorage.setItem('players', JSON.stringify(this.players));
      }
    }
  }

你從那里得到球員，localStorage然后把它放進去，localStorageItem而不是this.players。但是，當!item，您this.players.push(player)將其設定為localStorage。您還需要像下面這樣附加：（用 . 標記添加的行localStorageItem。）this.players!

addPlayer(player: Player) {
>   if (localStorage.getItem('players') === null) {
      this.players.push(player);
      localStorage.setItem('players', JSON.stringify(this.players));
>   } else {
>     let localStorageItem = JSON.parse(
>       localStorage.getItem('players') || '[]'
>     );
!     this.players.push(...localStorageItem)
>     let item = localStorageItem.find(
>       (item: Player) => item.name === player.name
>     );
>     if (!item) {
>       this.players.push(player);
>       localStorage.setItem('players', JSON.stringify(this.players));
      }
    }
  }

uj5u.com熱心網友回復：

我讓它作業了。我改變了這個：

if (!item) {
        this.players.push(player);
        localStorage.setItem('players', JSON.stringify(this.players));
      }

進入這個：

if (item === undefined) {
        localStorageItem.push(player);
        localStorage.setItem('players', JSON.stringify(localStorageItem));
      }

它作業完美。

uj5u.com熱心網友回復：

我對您的代碼進行了一些更新。在我所做的更改中，應用程式現在將添加新玩家而不重置值。它還將在重新加載瀏覽器時補充玩家串列。希望這可以幫助。

你可以在這里看到變化：https ://stackblitz.com/edit/angular-ivy-kmw7db?file=src/app/game.service.ts

標籤：javascript 有角度的 本地存储

上一篇：這兩個代碼代碼之間有區別嗎？

下一篇：如何更改javascript類中類建構式的內容并稍后訪問它？