如何在Angular中利用localStorage和sessionStorage進行本地存儲

在Angular應用中可以使用localStorage和sessionStorage來進行本地存儲。這兩個API可以用來在瀏覽器中存儲數據，以便在用戶會話期間保持數據或者在用戶重新訪問頁面時檢索數據。

以下是在Angular中如何使用localStorage和sessionStorage進行本地存儲的示例：

1. 使用localStorage進行本地存儲：

// 導入需要的模塊
import { Injectable } from '@angular/core';

@Injectable()
export class LocalStorageService {
  
  constructor() { }

  // 存儲數據到localStorage
  setItem(key: string, value: any) {
    localStorage.setItem(key, JSON.stringify(value));
  }

  // 從localStorage中獲取數據
  getItem(key: string) {
    return JSON.parse(localStorage.getItem(key));
  }

  // 從localStorage中移除數據
  removeItem(key: string) {
    localStorage.removeItem(key);
  }

  // 清空localStorage中的所有數據
  clear() {
    localStorage.clear();
  }
}

2. 使用sessionStorage進行本地存儲：

// 導入需要的模塊
import { Injectable } from '@angular/core';

@Injectable()
export class SessionStorageService {
  
  constructor() { }

  // 存儲數據到sessionStorage
  setItem(key: string, value: any) {
    sessionStorage.setItem(key, JSON.stringify(value));
  }

  // 從sessionStorage中獲取數據
  getItem(key: string) {
    return JSON.parse(sessionStorage.getItem(key));
  }

  // 從sessionStorage中移除數據
  removeItem(key: string) {
    sessionStorage.removeItem(key);
  }

  // 清空sessionStorage中的所有數據
  clear() {
    sessionStorage.clear();
  }
}

在Angular應用中，可以將上述服務注入到組件或其他服務中，然后使用這些服務來存儲、獲取、移除或清空本地存儲中的數據。通過使用localStorage和sessionStorage，可以方便地在應用中實現本地存儲功能。