Angular 2 как сделать привязку данных с localstorage?

Question

[Владимир Мирка]

Задача следующая - обновляются данные в localstorage и нужно эти данные, при изменении, зафиксировать в этот же момент времени. Как сделать привязку таким образом, чтобы при изменении данных в localstorage, срабатывал обработчик?

Answer 1

[Дмитрий Лузанов]

Вот так можно сделать на чистом TypeScript. В ангуляре прикрутите родной EventEmitter или ипользуйте rxjs.

class EventEmitter  {
  constructor() {
    const delegate = document.createDocumentFragment();

    [
      'addEventListener',
      'dispatchEvent',
      'removeEventListener'
    ].forEach(f =>
      this[f] = (...xs) => delegate[f](...xs)
    )
  }

  public addEventListener(event: string, callback: Function) {}
  public removeEventListener(event: string, callback: Function) {}
  public dispatchEvent(event: Event) {}
}

export class CustomLocalStorage extends EventEmitter {
  private successSetEvent: Event
  private errorSetEvent: Event

  constructor(public prefix: string = 'local') {
    super()
    this.successSetEvent = new CustomEvent(`set:success`)
    this.errorSetEvent = new CustomEvent(`set:error`)
  }

  public setItem(key: string, value: any) {
    try {
      localStorage.setItem(`${this.prefix}-${key}`, JSON.stringify(value))
      this.dispatchEvent(this.successSetEvent)
    } catch (error) {
      this.dispatchEvent(this.errorSetEvent)
    }
  }
  
  public getItem(key: string) {
    return JSON.parse(localStorage.getItem(`${this.prefix}-${key}`))
  }
}

const lStorage = new CustomLocalStorage('lStorage')

lStorage.addEventListener('set:success', function() {
  alert('success')
})

lStorage.setItem('any', true)
setTimeout(function() {
  lStorage.setItem('foo', {
    a: 1,
    b: 2
  })
}, 2000)