如何在 angular 通用中使用 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.
这篇关于如何在 angular 通用中使用 localStorage?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!