как получить доступ к localalstorage только на браузере angular ssr - PullRequest
Новая
       63

как получить доступ к localalstorage только на браузере angular ssr

0 голосов
/ 24 марта 2020

Я пытаюсь внедрить Browser Storage в мое приложение angular, используя следующий код: 

import {Inject, Injectable, InjectionToken} from '@angular/core';

export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
  providedIn: 'root',
  factory: () => localStorage
});

@Injectable({
  providedIn: 'root'
})
export class BrowserStorageService {
  constructor(@Inject(BROWSER_STORAGE) public storage: Storage) {
  }

  get(key: string) {
    return this.storage.getItem(key);
  }

  set(key: string, value: string) {
    this.storage.setItem(key, value);
  }

  remove(key: string) {
    this.storage.removeItem(key);
  }

  clear() {
    this.storage.clear();
  }
}

Но выдает ошибку на сервере, и приложение не запускается 

ERROR ReferenceError: localStorage is not defined

как определить хранилище так, чтобы оно определялось и мое приложение работало?

1 Ответ

0 голосов
/ 24 марта 2020

Вы можете попробовать один из этих 2 вариантов

Опция 1

Изменить заводскую настройку так, чтобы она принимала идентификатор платформы 

declare let localStorage: any;

export function localStorageFactory(platformId: Object)
{
    return isPlatformBrowser(platformId)? localStorage: null; //Don't use null, use a dummy implementation that does not rely on localStorage
}


export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
  providedIn: 'root',
  factory: () => localStorageFactory,
  deps: [PLATFORM_ID]
});

Опция 2

Измените текущую реализацию службы, чтобы внедрить маркер идентификатора платформы 

@Injectable({
  providedIn: 'root'
})
export class BrowserStorageService {

  private readonly isBrowser;

  constructor(@Inject(BROWSER_STORAGE) public storage: Storage, @Inject(PLATFORM_ID) private platformId: Object) {

       this.isBrowser = isPlatformBrowser(platformId);
  }

  get(key: string) {
    //check if browser or not
    return this.isBrowser? this.storage.getItem(key) : null;
  }
...