Angular에서 세션 스토리지에 JSON 데이터를 저장하는 방법

Key Takeaways

JSON 데이터는 세션 스토리지에 저장하기 전에 문자열화해야 합니다.
전용 Angular 서비스는 코드 재사용과 구성을 향상시킵니다.
보안 위험으로 인해 민감한 데이터 저장을 피하십시오.

세션 스토리지는 세션 중에 사용자 브라우저에 데이터를 일시적으로 저장하는 강력한 도구입니다. Angular 애플리케이션에서 세션 스토리지를 효과적으로 관리하면 페이지를 다시 로드할 때 상태를 유지하여 사용자 경험을 향상시킬 수 있습니다. 이 가이드에서는 Angular 컨텍스트 내에서 세션 스토리지에 JSON 데이터를 저장하고 검색하는 방법을 안내합니다.([Stack Overflow][1])

세션 스토리지 이해하기

세션 스토리지는 웹 스토리지 API의 일부로, 웹 브라우저에 키-값 쌍을 저장할 수 있습니다. 데이터를 무기한 유지하는 로컬 스토리지와 달리 세션 스토리지는 페이지 세션 동안만 데이터를 유지합니다. 브라우저 탭이 닫히면 데이터가 지워집니다.([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'
    };

    // Serialize and store the JSON object
    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); // Outputs: 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 saving to session storage', 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 reading from session storage', 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); // Outputs: Jane Smith
    }
  }
}