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() 関数内で、getItem を使用して、sessionStorage から key に基づいて目的のデータを取得します。
# 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 の場所にデータを追加しました。
app.component.html にボタンを作成する必要があります。このボタンは、removeData() 関数を呼び出します。したがって、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 の場所を保存します。その後、ロケーションの削除ボタンをクリックして、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