Angular ローカルストレージにデータを保存する

Angular のローカルストレージにデータを保存する方法を紹介します。

Angular のローカルストレージ

ローカルストレージは、Web ブラウザのキーと値のペアを使用してクライアントのコンピュータにデータを保存する方法です。ローカルストレージの最も優れている点は、ローカルストレージに保存されているデータの有効期限がないことですが、clear() 関数を使用していつでも削除できます。

ここで、キーと値のペアを使用して Angular のローカルストレージにデータを簡単に保存する方法を理解します。まず、名前をローカルストレージに保存する関数 storeName() を作成します。

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  key: string = 'Name';
  myItem: string;
  storeName() {
    localStorage.setItem(this.key, 'Angular');
    this.myItem = localStorage.getItem(this.key);
  }
}

次に、app.component.html ファイルにテンプレートを作成します。ユーザーがクリックしたときにローカルストレージにデータを保存するためのボタンを作成します。

#  angular
<button (click)="storeName()">Click to store name</button>

それでは、アプリケーションがどのように機能するかを確認しましょう。

上記の例では、ボタンをクリックすると、キーと値のペアを使用して名前がローカルストレージに保存されました。

次のステップで、このデータをローカルストレージから削除する方法について説明します。機密データをローカルストレージに保存すると、簡単にアクセスできるためです。したがって、必要が満たされた後、機密データを削除することをお勧めします。

ローカルストレージからデータを削除する方法は 2つあります。キーを使用して特定のデータを削除するか、ローカルストレージに保存されているすべてのデータを削除することができます。

ローカルストレージから特定のデータのみを削除する方法について説明します。

# angular
SpecificDelete() {
    localStorage.removeItem('Name');
  }

app.component.html に onClick アクションのボタンを追加します。

# angular
<button (click)="SpecificDelete()">Delete Name</button>

アプリケーションがどのように機能するかを確認してみましょう。

上記の例では、Delete Name ボタンをクリックすると、Name キーのみのデータが削除されます。

Angular のローカルストレージからすべてのデータを削除する別の関数を作成しましょう。

# angular
deleteName() {
    localStorage.clear();
  }

onClick メソッドを使用してテンプレートにボタンを作成しましょう。

# angular
<button (click)="deleteName()">Delete All Data</button>

アプリケーションがどのように機能するかを確認してみましょう。

上記の例では、Delete All Data ボタンをクリックするたびに、ローカルストレージからすべてのデータが削除されます。