Angular 18中MyComponent出现ReferenceError: sessionStorage未定义问题

问题原因 #

这个问题核心是**服务器端渲染（SSR）**导致的：Angular 18默认可能启用了SSR（比如CLI生成的新项目自带SSR配置），在服务器端执行代码时，Node.js环境不存在浏览器专属的sessionStorage API。MyComponent的ngOnInit会在服务器端预渲染阶段执行，因此触发报错；而GenerateInfo中的setSessionIdToStorage方法应该是在浏览器端通过用户交互等触发调用，不会进入服务器端执行流程，所以没有报错。

解决方案 #

方案1：直接判断浏览器环境 #

在访问sessionStorage前先校验当前环境是否为浏览器：

export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    if (typeof sessionStorage !== 'undefined') {
      const sessionId = sessionStorage.getItem('sessionId');
      // 后续业务逻辑
    }
  }
}

方案2：用Angular官方API判断平台 #

通过依赖注入PLATFORM_ID，结合isPlatformBrowser方法精准判断运行平台：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class MyComponent implements OnInit {

  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      const sessionId = sessionStorage.getItem('sessionId');
      // 后续业务逻辑
    }
  }
}

方案3：封装统一存储服务（推荐） #

创建全局存储服务，统一处理环境判断，避免重复代码：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class StorageService {
  private isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  getItem(key: string): string | null {
    return this.isBrowser ? sessionStorage.getItem(key) : null;
  }

  setItem(key: string, value: string): void {
    if (this.isBrowser) {
      sessionStorage.setItem(key, value);
    }
  }

  // 可按需添加removeItem、clear等方法
}

在组件中注入使用：

export class MyComponent implements OnInit {

  constructor(private storageService: StorageService) { }

  ngOnInit(): void {
    const sessionId = this.storageService.getItem('sessionId');
    // 后续业务逻辑
  }
}

内容的提问来源于stack exchange，提问作者Prabhas Kumra