Angular独立组件访问localStorage提示未定义的问题咨询

这个错误的核心原因是localStorage是浏览器环境特有的全局对象，如果你的组件在**服务端渲染（SSR）**场景下运行，或者在组件初始化的非浏览器阶段执行代码，就会出现找不到该对象的报错。

以下是几种可行的解决方法：

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

在调用localStorage前先检查其是否存在：

Addtodo(todo: Todo) {
    console.log('I am hit here for adding Todo');
    console.log('I have been in Git in the parent', todo);

    const result = this.todos?.push(todo);
    // 先确认当前是浏览器环境再执行存储操作
    if (typeof localStorage !== 'undefined') {
        localStorage.setItem("todos", JSON.stringify(this.todos));
    }

    console.log('rebjhbhjewbjker', result);
}

方法2：用Angular官方工具判断环境 #

更符合Angular开发规范的方式是通过PLATFORM_ID和isPlatformBrowser工具函数来判断：

1. 先导入所需依赖：

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

2. 在组件构造函数中注入PLATFORM_ID：

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

3. 在方法中使用工具函数判断：

Addtodo(todo: Todo) {
    console.log('I am hit here for adding Todo');
    console.log('I have been in Git in the parent', todo);

    const result = this.todos?.push(todo);
    if (isPlatformBrowser(this.platformId)) {
        localStorage.setItem("todos", JSON.stringify(this.todos));
    }

    console.log('rebjhbhjewbjker', result);
}

方法3：封装localStorage服务（推荐） #

把localStorage的操作封装成独立服务，统一处理环境判断，方便在多个组件复用：

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

@Injectable({ providedIn: 'root' })
export class LocalStorageService {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  setItem(key: string, value: any): void {
    if (isPlatformBrowser(this.platformId)) {
      localStorage.setItem(key, JSON.stringify(value));
    }
  }

  getItem(key: string): any {
    if (isPlatformBrowser(this.platformId)) {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : null;
    }
    return null;
  }
}

然后在组件中注入并使用：

constructor(private localStorageService: LocalStorageService) {}

Addtodo(todo: Todo) {
    console.log('I am hit here for adding Todo');
    console.log('I have been in Git in the parent', todo);

    const result = this.todos?.push(todo);
    this.localStorageService.setItem("todos", this.todos);

    console.log('rebjhbhjewbjker', result);
}

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