Question

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

使用possibly more帖子工作正常但是因为我包含localStorage它停止了工作。有没有办法使它工作或角度通用

中的localStorage的任何模块

Answer 1

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

反映Storage API的抽象类可用作标记：

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 Universal进行服务器端渲染时，Angular应用程序在Nodejs服务器和客户端浏览器中都运行。此时，服务器应用程序没有对localStorage对象的引用，因为它仅在客户端可用。

我写了一篇有关实现该解决方案的文章：How to use localStorage on Angular 9 Universal (SSR)

如何在角度通用中使用localStorage？

2 个答案: