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

【问题标题】：How to use localStorage in angular universal?如何在角度通用中使用localStorage？
【发布时间】：2017-10-27 14:02:02
【问题描述】：

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

使用Auler 帖子工作正常，但当我包含 localStorage 时它停止工作。有什么方法可以使它工作或任何模块用于 angular Universal 中的 localStorage

【问题讨论】：

标签： angular local-storage angular-universal angular-local-storage

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

一个好办法是让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 代替全局持久存储也使测试更容易。

【讨论】：

谢谢 estus ，现在我只是用 platformID 创建了一个工作，因为我没有存储太多数据只是一个令牌。我也会尝试这个解决方案。
是的，提供者只是一种更简洁的方法。当然，platformID 可以在 provider 中使用，但这只会导致 StorageShim 出现在不需要的浏览器包中。