如何在角度通用中使用localStorage? [英] How to use localStorage in angular universal?

问题描述

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

I am using @angular v4.0.3 and webpack 2.2.0.

使用 Auler 工作正常> 发布，但当我包含 localStorage 时，它​​停止工作.有什么方法可以使它工作或在角度通用的 localStorage 中使用任何模块

It was working fine using Auler post but as I included localStorage it stopped working. Is there any way to make it work or any module for localStorage in angular universal

推荐答案

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

A good way is to make localStorage an injectable and provide different implementations for it.

反映<的抽象类code>Storage API 可以作为token使用:

An abstract class that reflects Storage API can be used as a 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;
}

那么对于浏览器应用模块来说就是

Then for browser app module it is

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

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

And for server app module localStorage can be replaced with some implementation, like node-storage-shim for in-memory storage:

{ provide: LocalStorage, useClass: StorageShim }

使用 DI 代替全局持久存储也使测试更容易.

Using DI instead of global persistent storage also makes testing easier.

这篇关于如何在角度通用中使用localStorage?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！