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

Key Takeaways

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

세션 스토리지는 세션 중에 사용자 브라우저에 데이터를 일시적으로 저장하는 강력한 도구입니다. 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
    }
  }
}

이 접근 방식은 더 깔끔한 코드를 장려하고 관심사를 분리하여 애플리케이션을 더 유지 관리하기 쉽게 만듭니다.

---

모범 사례

• 오류 처리: JSON을 파싱할 때 잠재적인 오류를 정상적으로 처리하려면 항상 try-catch 블록을 포함하십시오.
• 데이터 유효성 검사: 예기치 않은 동작을 방지하기 위해 세션 스토리지에서 검색된 데이터를 사용하기 전에 유효성을 검사하십시오.
• 보안 고려 사항: 브라우저 개발자 도구를 통해 액세스할 수 있으므로 세션 스토리지에 민감한 정보를 저장하지 마십시오.
• 서비스 추상화: 코드 재사용 및 유지 관리성을 높이기 위해 세션 스토리지 로직을 서비스 내에 캡슐화하십시오.

FAQs

Angular에서 세션 스토리지에 JSON 객체를 저장하는 방법은 무엇입니까?

JSON.stringify()를 사용하여 객체를 문자열로 변환한 다음 sessionStorage.setItem()을 사용합니다.

세션 스토리지에 서비스를 사용하는 이점은 무엇입니까?

컴포넌트 전반에 걸쳐 깔끔하고 재사용 가능하며 유지 관리 가능한 코드를 촉진합니다.

세션 스토리지는 민감한 데이터에 안전합니까?

아니요, 브라우저 도구를 통해 액세스할 수 있으므로 기밀 정보를 저장하지 마십시오.

저희는 백엔드 프로젝트 호스팅에 가장 적합한 선택인 Leapcell입니다.

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

• Node.js, Python, Go 또는 Rust로 개발하십시오.

무제한 프로젝트를 무료로 배포

• 사용량에 대해서만 지불하십시오. 요청도 없고 요금도 없습니다.

최고의 비용 효율성

• 유휴 요금 없이 사용량에 따라 지불하십시오.
• 예: $25는 평균 응답 시간 60ms에서 694만 개의 요청을 지원합니다.

간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
• 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

손쉬운 확장성 및 고성능

• 손쉽게 높은 동시성을 처리하기 위한 자동 확장.
• 운영 오버헤드가 없습니다. 빌드에만 집중하십시오.

설명서에서 자세히 알아보십시오!

X에서 팔로우하세요: @LeapcellHQ