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

Question

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

它工作正常使用Auler後，但因爲我包括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而不是全局持久存儲也使測試更容易。