AngularでSession StorageにJSONデータを保存する方法

Key Takeaways

JSONデータは、セッションストレージに保存する前に文字列化する必要があります。
専用のAngularサービスは、コードの再利用性と組織性を向上させます。
セキュリティリスクのため、機密データの保存は避けてください。

セッションストレージは、セッション中にユーザーのブラウザにデータを一時的に保存するための強力なツールです。Angularアプリケーションでは、セッションストレージを効果的に管理することで、ページのリロード時に状態を維持し、ユーザーエクスペリエンスを向上させることができます。このガイドでは、Angularのコンテキスト内でJSONデータをセッションストレージに保存および取得する方法について説明します。([Stack Overflow][1])

セッションストレージの理解

セッションストレージはWeb Storage APIの一部であり、キーと値のペアをWebブラウザに保存できます。データを無期限に保持するローカルストレージとは異なり、セッションストレージはページセッションの期間中のみデータを保持します。ブラウザのタブが閉じられると、データはクリアされます。([Stack Abuse][2], [JavaScript in Plain English][3])

JSONデータをセッションストレージに保存する

セッションストレージは文字列のみを保存できるため、JSONデータを保存する前にシリアル化する必要があります。Angularコンポーネントでこれを行う方法は次のとおりです。([Medium][4])

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>Session Storage Example</p>`
})
export class ExampleComponent implements OnInit {
  ngOnInit() {
    const user = {
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

    // JSONオブジェクトをシリアル化して保存する
    sessionStorage.setItem('user', JSON.stringify(user));
  }
}

この例では、userオブジェクトは、セッションストレージに保存される前に、JSON.stringify()を使用してJSON文字列に変換されます。([Stack Abuse][2])

セッションストレージからJSONデータを取得する

セッションストレージからJSONデータを取得してデシリアライズするには：

const userData = sessionStorage.getItem('user');
if (userData) {
  const user = JSON.parse(userData);
  console.log(user.name); // 出力：John Doe
}

このコードは、セッションストレージから文字列化されたJSONを取得し、JSON.parse()を使用してJavaScriptオブジェクトに解析し直します。([Stack Abuse][2])

Angularでセッションストレージサービスを作成する

コードの整理と再利用性を向上させるために、セッションストレージの操作を処理するための専用のサービスを作成することを検討してください。([Stack Overflow][5])

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

@Injectable({
  providedIn: 'root'
})
export class SessionStorageService {
  setItem(key: string, value: any): void {
    try {
      const serializedValue = JSON.stringify(value);
      sessionStorage.setItem(key, serializedValue);
    } catch (error) {
      console.error('セッションストレージへの保存エラー', error);
    }
  }

  getItem<T>(key: string): T | null {
    try {
      const item = sessionStorage.getItem(key);
      return item ? JSON.parse(item) as T : null;
    } catch (error) {
      console.error('セッションストレージからの読み取りエラー', error);
      return null;
    }
  }

  removeItem(key: string): void {
    sessionStorage.removeItem(key);
  }

  clear(): void {
    sessionStorage.clear();
  }
}

このサービスは、セッションストレージ内の項目の設定、取得、削除、およびクリアを行うメソッドを提供し、シリアル化とデシリアライズを内部で処理します。

セッションストレージサービスの使用

SessionStorageServiceをコンポーネントに注入して、セッションストレージを管理します。

import { Component, OnInit } from '@angular/core';
import { SessionStorageService } from './session-storage.service';

@Component({
  selector: 'app-user',
  template: `<p>User Component</p>`
})
export class UserComponent implements OnInit {
  constructor(private sessionStorageService: SessionStorageService) {}

  ngOnInit() {
    const user = {
      name: 'Jane Smith',
      email: 'jane.smith@example.com'
    };

    this.sessionStorageService.setItem('user', user);

    const storedUser = this.sessionStorageService.getItem<{ name: string; email: string }>('user');
    if (storedUser) {
      console.log(storedUser.name); // 出力：Jane Smith
    }
  }
}