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;
}
輸出:
我們將單擊 Save Data
按鈕以儲存 sessionStorage
位置。之後,我們將單擊 Remove Location
按鈕以從 sessionStorage
中刪除位置資料。
從 sessionStorage
中刪除所有資料
我們將討論從 Angular 中的 sessionStorage
中刪除所有資料。
我們將在 app.component.ts
中建立 deleteData()
函式。
# angular
deleteData(){
}
我們將使用 clear
刪除 sessionStorage
中的所有資料。所以我們的程式碼如下所示。
# angular
deleteData(){
sessionStorage.clear();
}
我們需要在 app.component.html
中建立一個按鈕來呼叫 deleteData()
函式。所以我們的程式碼如下所示。
# 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