本地存储未在 Angular 17 中定义

Question

最近我将角度从 16 迁移到 17 并开始显示 localStorage 未定义错误。我看到了一些从 angular.json 禁用 ssr 的解决方案

从

"server": "src/main.server.ts",
"prerender": true,
"ssr": {
  "entry": "server.ts"
}

到

"server": "src/main.server.ts",
"prerender": false,
"ssr": false

它有效，但我想知道还有其他方法可以在不禁用 ssr 的情况下使用本地存储。

Answer 1

一个简单的解决方案是localStorage通过DOCUMENTDI 令牌进行访问。

这是一个独立的组件，您可以使用它来验证它是否适合您。它在我的本地环境中使用 SSR 开发模式运行。

import { Component, Inject } from '@angular/core';
import { CommonModule, DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './test.component.html',
  styleUrl: './test.component.scss'
})
export class TestComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {
    const localStorage = document.defaultView?.localStorage;

    if (localStorage) {
      const counter = localStorage.getItem('counter');

      if (counter) {
        localStorage.setItem('counter', (parseInt(counter) + 1).toString());
      } else {
        localStorage.setItem('counter', '1');
      }
    }
  }
}

以下是一些了解更多信息的链接：

• 使用 Angular Universal 时的重要注意事项
• 使用 @Inject 提供自定义提供程序