如何在angular universal中使用localStorage？

Question

我正在使用@angular v4.0.3 和 webpack 2.2.0。

使用 Auler post 它工作正常，但是当我包含 localStorage 时它停止工作了。有什么方法可以让它工作或 angular universal

中 localStorage 的任何模块

Answer 1

一个好的方法是使 localStorage 成为可注射的并为其提供不同的实现。

一个反映Storage API的摘要class可以作为token:

export abstract class LocalStorage {
    readonly length: number;
    abstract clear(): void;
    abstract getItem(key: string): string | null;
    abstract key(index: number): string | null;
    abstract removeItem(key: string): void;
    abstract setItem(key: string, data: string): void;
    [key: string]: any;
    [index: number]: string;
}

然后对于浏览器应用模块是

export function localStorageFactory() {
  return localStorage;
}
...
{ provide: LocalStorage, useFactory: localStorageFactory }

对于服务器应用程序模块 localStorage 可以替换为一些实现，例如 node-storage-shim 用于内存存储：

{ provide: LocalStorage, useClass: StorageShim }

使用 DI 而不是全局持久存储也使测试更容易。

Answer 2

发生这种情况是因为使用 Angular 通用服务器端渲染，Angular 应用程序在 Nodejs 服务器和客户端浏览器中运行。此时，服务器应用程序没有对 localStorage 对象的引用，因为它仅在客户端可用。

我写了一篇关于此的文章并实施了解决方案：How to use localStorage on Angular 9 Universal (SSR)

如何在angular universal中使用localStorage？

How to use localStorage in angular universal?

local-storage

angular-local-storage

angular-universal

angular