Angular 中的“localStorage 未定义”

Question

执行此代码时，弹出的问题是“localStorage 未定义”。 还有 todos!=Todo[] 为什么我们不能直接将其 null 而不添加这个感叹号。

`

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 {
   
  }

  
}

`

尝试从构造函数中删除该函数并使用 ngInit 初始化它

Answer 1

您正在运行启用了 SSR 的应用程序。

SSR 在 NodeJS 上运行，但本地存储是仅限浏览器的 API。

您可以：

1. 通过在

   ssr:false

    中设置 

   angular.json
来禁用 SSR
2. 用仅运行 CSR 的

   afterNextRender()

   包装本地存储调用。