Angular의 세션 스토리지
sessionStorage와 Angular의 sessionStorage에 있는 특정 데이터를 저장, 가져오기, 삭제 또는 모든 데이터를 삭제하는 방법에 대해 알아봅니다.
Angular의 세션 스토리지
‘sessionStorage’는 페이지 세션 기간 동안 사용 가능한 모든 출처에 대해 별도의 저장 영역을 유지합니다. ‘sessionStorage’는 탭이나 창이 닫힐 때 플러시됩니다.
sessionStorage를 사용하여 데이터 저장
sessionStorage에 데이터를 저장하기 위해 app.component.ts 파일 안에 saveData() 함수를 생성합니다.
# angular
saveData(){
}
saveData 함수 내에서 setItem을 사용하여 sessionStorage에 이름을 저장합니다.
# angular
saveData() {
sessionStorage.setItem('name', 'Rana Hasnain');
}
sessionStorage에 데이터를 저장하는 기능이 완료되었습니다.
app.component.html 파일을 편집하고 click 이벤트가 있는 버튼을 saveData() 함수에 추가해야 합니다. 따라서 app.component.html의 코드는 아래와 같습니다.
# angular
<hello name="{{ name }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>
출력:
버튼을 클릭하면 name의 key와 함께 sessionStorage에 데이터가 저장됩니다.
출력:
sessionStorage에서 데이터 가져오기
sessionStorage에 저장된 데이터를 가져와 표시하는 방법에 대해 설명합니다.
app.component.ts에 getData() 함수를 생성합니다.
# angular
getData(){
}
getData() 함수 내에서 sessionStorage의 key를 기반으로 원하는 데이터를 가져오기 위해 getItem을 사용합니다.
# angular
getData(){
return sessionStorage.getItem('name');
}
이제 함수가 완료되었으며 getData() 함수에서 얻은 데이터를 표시해야 합니다.
app.component.html을 편집하고 hello 태그의 name 속성을 교체합니다. 따라서 app.component.html의 코드는 다음과 같습니다.
# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>
출력:
sessionStorage에서 특정 데이터 삭제
버튼 클릭 시 sessionStorage에서 key를 기반으로 특정 데이터를 삭제하는 방법에 대해 논의합니다.
먼저 app.component.ts에 removeData() 함수를 생성합니다.
# angular
removeData(){
}
removeItem을 사용하여 key를 기반으로 sessionStorage에서 특정 데이터를 제거합니다. 또한 sessionStorage에 몇 가지 추가 데이터를 추가합니다. 이 예에서는 제거할 수 있습니다.
app.component.ts의 코드는 다음과 같습니다.
# angular
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'Session Storage in Angular 12 By Husnain';
name = 'Angular ' + VERSION.major;
saveData() {
sessionStorage.setItem('name', 'Rana Hasnain');
sessionStorage.setItem('location', 'Pakistan');
}
getData() {
return sessionStorage.getItem('name');
}
removeData() {
sessionStorage.removeItem('location');
}
}
위의 코드에서 sessionStorage의 key 위치에 추가 데이터를 추가했으며 버튼 클릭 시 제거되었습니다.
removeData() 함수를 호출하는 app.component.html에 버튼을 만들어야 합니다. 따라서 app.component.html은 다음과 같이 보일 것입니다.
# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
또한 버튼을 더 보기 좋게 스타일을 지정하고 app.component.css에 다음 코드를 추가합니다.
# angular
p {
font-family: Lato;
}
.btn{
margin-right: 15px;
padding: 10px 15px;
background-color: blueviolet;
color: white;
border: none;
border-radius: 5px;
}
출력:
데이터 저장 버튼을 클릭하여 sessionStorage 위치를 저장합니다. 그런 다음 Remove Location 버튼을 클릭하여 sessionStorage에서 위치 데이터를 제거합니다.
sessionStorage에서 모든 데이터 삭제
Angular의 sessionStorage에서 모든 데이터를 삭제하는 방법에 대해 설명합니다.
app.component.ts에 deleteData() 함수를 생성합니다.
# angular
deleteData(){
}
clear를 사용하여 sessionStorage에서 모든 데이터를 삭제합니다. 따라서 우리의 코드는 아래와 같을 것입니다.
# angular
deleteData(){
sessionStorage.clear();
}
deleteData() 함수를 호출하려면 app.component.html에 버튼을 만들어야 합니다. 따라서 우리의 코드는 아래와 같을 것입니다.
# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>
출력:
최종 결과:
우리 파일은 결국 아래와 같을 것입니다.
app.component.ts:
# angular
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'Session Storage in Angular 12 By Husnain';
name = 'Angular ' + VERSION.major;
saveData() {
sessionStorage.setItem('name', 'Rana Hasnain');
sessionStorage.setItem('location', 'Pakistan');
}
getData() {
return sessionStorage.getItem('name');
}
removeData() {
sessionStorage.removeItem('location');
}
deleteData() {
sessionStorage.clear();
}
}
app.component.html:
# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()" class="btn">Save Data in Session Storage</button>
<button (click)="removeData()" class="btn">Remove Location</button>
<button (click)="deleteData()" class="btn">Clear All</button>
app.component.css:
# angular
p {
font-family: Lato;
}
.btn {
margin-right: 15px;
padding: 10px 15px;
background-color: blueviolet;
color: white;
border: none;
border-radius: 5px;
}
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn