จัดการ Session Storage ใน Angular

Session Storage จะเก็บข้อมูลไว้ตราบใดที่แท็บหรือหน้าต่างนั้นยังเปิดอยู่ และเมื่อปิดหน้าต่าง ข้อมูลจะถูกลบทิ้งทั้งหมด ซึ่งต่างจาก Local Storage ที่จะเก็บข้อมูลไว้ถาวรจนกว่าจะถูกลบ

ในที่นี้เราจะมาดูตัวอย่างการใช้ SessionStorageService ใน Angular ที่ผมได้สร้างขึ้นเพื่อจัดการกับข้อมูลใน Session Storage ได้อย่างง่ายดายและเป็นระบบ

อธิบายโค้ด SessionStorageService

1. ตั้งค่าข้อมูล (Set) - การเก็บข้อมูลในรูปแบบ JSON หรือข้อความธรรมดา และยังสามารถเก็บข้อมูลโดยไม่ใช้คำนำหน้า (prefix) ได้ เช่น

this.sessionStorageService.setItemJson('testKey1', { name: "test" });
this.sessionStorageService.setItem('testKey2', 'true');
this.sessionStorageService.setItemNoPrefix("testKey3", "testValue");

2. ดึงข้อมูล (Get) - สามารถดึงข้อมูลที่เก็บไว้โดยใช้ key ที่ตั้งไว้ และยังรองรับการดึงข้อมูลที่เป็นภาพ (image) ในรูปแบบ base64

const getItem = this.sessionStorageService.getItem('testKey1');
const getItemNoPrefix = this.sessionStorageService.getItemNoPrefix('testKey3');
const getImageItem = this.sessionStorageService.getImageItem("testKey2");
const getItemJson = this.sessionStorageService.getItemJson('testKey1');

3. ลบข้อมูล (Remove) - สามารถลบข้อมูลที่ต้องการด้วย key ที่ตั้งไว้และรองรับการลบโดยไม่ใช้คำนำหน้า

this.sessionStorageService.removeItem(`testKey1`);
this.sessionStorageService.removeNoPrefix(`testKey3`);

4. ลบข้อมูลทั้งหมด (Clear All) - ฟังก์ชันที่ใช้ลบข้อมูลทั้งหมดใน Session Storage ที่มีคำนำหน้า (prefix) ที่กำหนดไว้

    this.sessionStorageService.clearAll();

โค้ด SessionStorageService

SessionStorageService นี้ทำให้เราสามารถใช้งาน Session Storage ได้สะดวกขึ้น โดยที่เราไม่ต้องเขียนโค้ดซ้ำซากในหลายๆ ส่วนของโปรเจค ข้อดีอีกอย่างคือการใช้คำนำหน้า (prefix) เพื่อแยกแยะข้อมูลแต่ละแอปพลิเคชันได้ง่ายขึ้น

import { Injectable } from '@angular/core';

const PREFIX = 'my-app';

@Injectable({
  providedIn: 'root',
})
export class SessionStorageService {
  storage: Storage;

  constructor() {
    this.storage = sessionStorage;
  }

  getItem(key: string, prefix = PREFIX) {
    const item = this.storage.getItem(`${prefix}${key}`);
    if (item) {
      try {
        return JSON.parse(`"${item}"`);
      } catch {
        return item;
      }
    }
    return item;
  }

  getItemNoPrefix(key: string) {
    const item = this.storage.getItem(`${key}`);
    if (item) {
      try {
        return JSON.parse(`${item}`);
      } catch {
        return item;
      }
    }
    return item;
  }

  getImageItem(key: string, prefix = PREFIX) {
    return this.getItemJson(key, prefix)
      ? 'data:image/png;base64,' + this.getItemJson(key, prefix)
      : null;
  }

  getItemJson<T>(key: string, prefix = PREFIX): T | null {
    const item = this.storage.getItem(`${prefix}${key}`);
    if (item) {
      try {
        return JSON.parse(item) as T;
      } catch {
        return null;
      }
    }
    return null;
  }

  setItemJson(key: string, value: unknown, prefix = PREFIX): void {
    this.storage.setItem(`${prefix}${key}`, JSON.stringify(value));
  }

  setItem(key: string, value: string, prefix = PREFIX): void {
    this.storage.setItem(`${prefix}${key}`, value);
  }

  setItemNoPrefix(key: string, value: string): void {
    this.storage.setItem(`${key}`, JSON.stringify(value));
  }

  removeItem(key: string, prefix = PREFIX): void {
    this.storage.removeItem(`${prefix}${key}`);
  }

  removeNoPrefix(key: string): void {
    this.storage.removeItem(`${key}`);
  }

  clearAll(): void {
    const arr = [];

    for (let i = 0; i < this.storage.length; i++) {
      arr.push(this.storage.key(i));
    }

    for (let i = 0; i < arr.length; i++) {
      if (arr[i]?.startsWith(PREFIX)) {
        this.storage.removeItem(arr[i] || '');
      }
    }
  }
}

สรุป

SessionStorageService เป็นตัวช่วยที่ดีมากๆในการจัดการข้อมูลใน Session Storage ทำให้โค้ดกระชับ เข้าใจง่าย และมีประสิทธิภาพในการใช้งาน สามารถเก็บและดึงข้อมูลได้อย่างเป็นระบบและสามารถลบข้อมูลได้ตามต้องการ โดยเฉพาะอย่างยิ่งเหมาะสำหรับข้อมูลที่ไม่ต้องเก็บถาวร