Angular 中的會話儲存

Rana Hasnain Khan 2022年12月21日 2022年4月20日
Angular 中的會話儲存

我們將瞭解 sessionStorage 以及如何在 Angular 中的 sessionStorage 中儲存、獲取、刪除特定資料或刪除所有資料。

Angular 中的會話儲存

sessionStorage 為頁面會話期間可用的每個給定源保留一個單獨的儲存區域。sessionStorage 在標籤頁或視窗關閉時重新整理。

使用 sessionStorage 儲存資料

為了在 sessionStorage 中儲存資料,我們將在 app.component.ts 檔案中建立一個函式 saveData()

 tsCopy# angular
saveData(){

}

saveData 函式中,我們將使用 setItem 將名稱儲存在 sessionStorage 中。

 tsCopy# angular
saveData() {
    sessionStorage.setItem('name', 'Rana Hasnain');
}

我們在 sessionStorage 中儲存資料的功能已經完成。

我們需要編輯我們的 app.component.html 檔案並將帶有 click 事件的按鈕新增到 saveData() 函式。因此,我們在 app.component.html 中的程式碼將如下所示。

HTML
 htmlCopy# angular
<hello name="{{ name }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

輸出:

以 Angular 將資料儲存在會話儲存中

當我們點選按鈕時,它將使用 namekey 將資料儲存在 sessionStorage 中。

輸出:

將資料儲存在會話儲存結果中

sessionStorage 獲取資料

我們將討論如何獲取 sessionStorage 中儲存的資料並顯示它。

我們將在 app.component.ts 中建立一個 getData() 函式。

 tsCopy# angular
getData(){
    
  }

getData() 函式中,我們將使用 getItem 根據 sessionStorage 中的 key 獲取我們想要的資料。

 tsCopy# angular
getData(){
    return sessionStorage.getItem('name');
  }

我們現在完成了我們的函式,我們需要顯示從 getData() 函式獲得的資料。

我們將編輯 app.component.html 並替換 hello 標記的 name 屬性。所以我們在 app.component.html 中的程式碼將如下所示。

HTML
 htmlCopy# angular
<hello name="{{ getData() }}"></hello>
<button (click)="saveData()">Save Data in Session Storage</button>

輸出:

以 Angular 從會話儲存中獲取資料

sessionStorage 中刪除特定資料

我們將討論在單擊按鈕時從 sessionStorage 中刪除基於 key 的特定資料。

首先,我們將在 app.component.ts 中建立 removeData() 函式。

 tsCopy# angular
removeData(){
    
  }

我們將使用 removeItem 根據 keysessionStorage 中刪除特定資料。我們還將在 sessionStorage 中新增一些額外的資料,我們可以在本示例中將其刪除。

app.component.ts 中的程式碼如下所示。

 tsCopy# 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 看起來像這樣。

HTML
 htmlCopy# 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 中新增以下程式碼。

CSS
 cssCopy# angular
p {
  font-family: Lato;
}
.btn{
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}

輸出:

從 Angular 的會話儲存中刪除特定資料

我們將單擊 Save Data 按鈕以儲存 sessionStorage 位置。之後,我們將單擊 Remove Location 按鈕以從 sessionStorage 中刪除位置資料。

從會話儲存結果中刪除特定資料

sessionStorage 中刪除所有資料

我們將討論從 Angular 中的 sessionStorage 中刪除所有資料。

我們將在 app.component.ts 中建立 deleteData() 函式。

 tsCopy# angular
deleteData(){

  }

我們將使用 clear 刪除 sessionStorage 中的所有資料。所以我們的程式碼如下所示。

 tsCopy# angular
deleteData(){
    sessionStorage.clear();
  }

我們需要在 app.component.html 中建立一個按鈕來呼叫 deleteData() 函式。所以我們的程式碼如下所示。

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

輸出:

以 Angular 從會話儲存中刪除所有資料

最後結果:

從會話儲存中儲存和刪除資料的最終結果

我們的檔案最終將如下所示。

app.component.ts

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

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

CSS
 cssCopy# angular
p {
  font-family: Lato;
}
.btn {
  margin-right: 15px;
  padding: 10px 15px;
  background-color: blueviolet;
  color: white;
  border: none;
  border-radius: 5px;
}
Rana Hasnain Khan avatar Rana Hasnain Khan avatar

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