Angular中localStorage未定义及todos非空断言疑问

问题详情 #

1. 执行以下Angular代码时出现**"localStorage is not defined"**错误，尝试将构造函数逻辑移至ngOnInit后仍未解决
2. 疑问：为何不能直接将todos设为null，必须使用非空断言操作符!（即声明为todos!: Todo[]）

相关代码 #

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Todo } from "../../Todo";
import { TodoItemsComponent } from "../todo-items/todo-items.component";
import { AddTodoComponent } from '../add-todo/add-todo.component';

@Component({
    selector: 'app-todo',
    standalone: true,
    templateUrl: './todo.component.html',
    styleUrl: './todo.component.css',
    imports: [CommonModule,TodoComponent, TodoItemsComponent,AddTodoComponent]
})
export class TodoComponent implements OnInit{
  localItem: string | null;
  todos!: Todo[];

  constructor(){
    this.localItem=localStorage.getItem('todos');
    if(this.localItem == null){ 
      this.todos=[];
    }
    else{
      this.todos=JSON.parse(this.localItem);
    }
    
  }

  deleteTodo(todo:Todo){
    const index=this.todos.indexOf(todo);
    this.todos.splice(index, 1);
    console.log(todo);
    localStorage.setItem("todos",JSON.stringify(this.todos));
  }
  
  addTodo(todo:Todo){
    this.todos.push(todo);
    console.log(todo);
    localStorage.setItem("todos",JSON.stringify(this.todos));
  }

 
  ngOnInit(): void {
   
  }

  
}

错误截图 #

问题解答 #

一、解决"localStorage is not defined"错误 #

这个错误大多出现在服务端渲染（SSR）场景（比如使用Angular Universal），因为服务端环境不存在浏览器专属的localStorage对象。解决方式：

• 增加环境判断，确保仅在浏览器环境中访问localStorage：

  constructor(){
    if (typeof window !== 'undefined') {
      this.localItem = localStorage.getItem('todos');
      this.todos = this.localItem ? JSON.parse(this.localItem) : [];
    } else {
      this.todos = []; // 服务端环境赋予默认空数组
    }
  }
  

• 若为纯客户端项目，检查是否在组件初始化前（比如类属性直接赋值阶段）提前调用了localStorage，确保在构造函数或ngOnInit中执行相关逻辑。

二、关于todos的非空断言操作符疑问 #

你完全可以将todos设为null，只需调整类型声明和后续使用逻辑：

1. 若声明为todos: Todo[] | null，每次使用todos的方法（如splice、push）前必须先做非空判断，否则TypeScript会报错：

   deleteTodo(todo:Todo){
     if (!this.todos) return; // 先判断非空再执行逻辑
     const index=this.todos.indexOf(todo);
     this.todos.splice(index, 1);
     if (typeof window !== 'undefined') {
       localStorage.setItem("todos",JSON.stringify(this.todos));
     }
   }
   

2. 使用非空断言!是明确告诉TypeScript：该变量在运行时绝不会是null/undefined，这样就无需每次使用都写判断逻辑。你的代码中无论localItem是否为空，todos都会被赋值为数组，所以使用!是安全的。

如果不想用非空断言，也可以直接给todos初始化默认值，逻辑更简洁：

todos: Todo[] = []; // 直接初始化空数组

constructor(){
  if (typeof window !== 'undefined') {
    this.localItem = localStorage.getItem('todos');
    if (this.localItem) {
      this.todos = JSON.parse(this.localItem);
    }
  }
}

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