Angular 로컬 스토리지에 데이터 저장

Angular에서 로컬 스토리지에 데이터를 저장하는 방법을 소개합니다.

Angular의 로컬 스토리지

로컬 저장소는 웹 브라우저에서 키와 값 쌍을 사용하여 클라이언트 컴퓨터에 데이터를 저장하는 방법입니다. 로컬 저장소의 가장 좋은 점은 로컬 저장소에 저장된 데이터에 만료 날짜가 없지만 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>

이제 애플리케이션이 어떻게 작동하는지 확인해 보겠습니다.

위의 예에서 버튼을 클릭하면 키와 값 쌍을 사용하여 로컬 저장소에 이름을 저장했습니다.

다음 단계에서 로컬 스토리지에서 이 데이터를 삭제하는 방법에 대해 설명합니다. 민감한 데이터를 로컬 저장소에 저장하면 쉽게 액세스할 수 있기 때문입니다. 따라서 필요가 충족된 후 민감한 데이터를 삭제하는 것이 좋습니다.

로컬 저장소에서 데이터를 삭제하는 방법에는 두 가지가 있습니다. 키를 사용하여 특정 데이터를 삭제하거나 로컬 저장소에 저장된 모든 데이터를 삭제할 수 있습니다.

로컬 저장소에서 특정 데이터만 삭제하는 방법에 대해 설명합니다.

# 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>

이제 애플리케이션이 어떻게 작동하는지 확인해 보겠습니다.

위의 예에서 모든 데이터 삭제 버튼을 클릭할 때마다 로컬 저장소의 모든 데이터가 삭제됩니다.