Angular 中的會話儲存

Rana Hasnain Khan 2024年2月15日
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>

輸出:

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

當我們點選按鈕時,它將使用 namekey 將資料儲存在 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>

輸出:

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

sessionStorage 中刪除特定資料

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

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

# angular
removeData(){
    
  }

我們將使用 removeItem 根據 keysessionStorage 中刪除特定資料。我們還將在 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;
}

輸出:

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

我們將單擊 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>

輸出:

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

最後結果:

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

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

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