如何使用TypeScript編輯localStorage中的值

想改進這個問題？更新問題，使其成為 Stack Overflow的主題。

29 分鐘前關閉。

我正在使用 Angular 開發一個簡單的“綠燈，紅燈”游戲，我正在使用 localStorage 存盤玩家的分數和 maxScore。

我已經可以從存盤在 localStorage 中的陣列中讀取每個屬性，但是現在一旦單擊按鈕，我就會被困在修改這些值上。

這是我目前正在使用的測驗陣列：

[{"name":"test1","score":3,"maxScore":8},{"name":"test2","score":10,"maxScore":22}]

這個陣列用一個名為“players”的鍵存盤，所以它是一個玩家陣列。

我的組件如下所示：

游戲組件.ts

export class GameComponentComponent implements OnInit {
  highScoreLS: number = this.getHighScoreData();
  scoreLS: number = this.getScoreData();

  highScore: number = 0;
  score: number = 0;
  state: string = 'RUN';

  faArrowRightFromBracket = faArrowRightFromBracket;
  faShoePrints = faShoePrints;

  constructor() {}

  ngOnInit(): void {}

  addPoint() {
    this.score  ;
    if (this.score > this.highScore) {
      this.highScore = this.score;
    }
    this.changeHighScore();
    this.changeScore();
  }

  removePoint() {
    this.score--;
    if (this.score < 0) {
      this.score = 0;
    }
    this.changeHighScore();
    this.changeScore();
  }

  changeState() {
    if (this.state === 'RUN') {
      this.state = 'PAUSE';
    } else {
      this.state = 'RUN';
    }
  }

  getScoreData() {
    let localStorageItem = JSON.parse(localStorage.getItem('players') || '[]');
    let item = localStorageItem.find(
      (item: { name: string }) => item.name === 'test1'
    );
    let sc = item.score;
    return sc;
  }

  getHighScoreData() {
    let localStorageItem = JSON.parse(localStorage.getItem('players') || '[]');
    let item = localStorageItem.find(
      (item: { name: string }) => item.name === 'test1'
    );
    let hs = item.maxScore;
    return hs;
  }

  changeHighScore() {
    let localStorageItem = JSON.parse(localStorage.getItem('players') || '[]');
    let item = localStorageItem.find(
      (item: { name: string }) => item.name === 'test1'
    );
    item.maxScore = this.highScore;
    localStorage.setItem('players', JSON.stringify(item));
  }

  changeScore() {
    let localStorageItem = JSON.parse(localStorage.getItem('players') || '[]');
    let item = localStorageItem.find(
      (item: { name: string }) => item.name === 'test1'
    );
    item.score = this.score;
    localStorage.setItem('players', JSON.stringify(item));
  }
}

html看起來像這樣：

game.component.html

<div class="navbar navbar-dark bg-dark">
  <div class="container">
    <h2>Hi! ??</h2>
    <a class="navbar-brand" routerLink=""
      ><fa-icon [icon]="faArrowRightFromBracket"></fa-icon
    ></a>
  </div>
</div>

<div class="container flex vh-100">
  <div class="row m-3">
    <h3>HIGH SCORE: {{ highScoreLS }}</h3>
  </div>
  <div class="row m-3">
    <div class="card p-3">
      <h3>{{ state }}</h3>
    </div>
  </div>
  <div class="row m-3">
    <h3>SCORE: {{ scoreLS }}</h3>
  </div>
  <div class="row m-3">
    <div class="col">
      <button class="btn btn-outline-success" (click)="addPoint()">
        <fa-icon [icon]="faShoePrints"></fa-icon>
        Left
      </button>
      <button class="btn btn-outline-success" (click)="removePoint()">
        Right
        <fa-icon [icon]="faShoePrints"></fa-icon>
      </button>
    </div>
  </div>
</div>

問題是，當我單擊按鈕添加或洗掉一個點時，它會洗掉整個玩家陣列，并創建一個新的玩家，如下所示：

{"name":"test1","score":0,"maxScore":1}

我已經在 localStorage 作業了幾天，所以我不知道我到底錯過了什么或者我做錯了什么。我的想法是編輯這些值，score和maxScore，但我無法弄清楚如何。

編輯 我第一次單擊添加點時，它只編輯 maxScore，但只有一次。下次我點擊時，它給了我這個錯誤：

ERROR TypeError: localStorageItem.find is not a function
    at GameComponentComponent.changeScore (game-component.component.ts:83:33)
    at GameComponentComponent.addPoint (game-component.component.ts:34:10)

uj5u.com熱心網友回復：

您只使用單個專案而不是整個陣列呼叫 localStorage.setItem，因此您嘗試的每個后續“發現”都會失敗。

試試這個：

localStorage.setItem('players', JSON.stringify(localStorageItem));

雖然我不得不說，只有一個組件中有大量重復的代碼。你應該閱讀一些關于資料結構和狀態管理的文章。

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

上一篇：如何在Node中初始化FirebaseV9資料庫

下一篇：Promise.then()里面的for回圈值