I am trying to access the localStorage using Angular 4 and look for changes in the localStorage values using the Observables:

Here's the code I have been working on:

userNameObservable: Observable<string>;
userName: String = '';
ngOnInit() {
    this.userNameObservable = Observable.create(
      Observable.of(localStorage.getItem('profileName'))
    );
    this.userNameObservable.subscribe((name: String) => {
      this.userName = name;
    })
}

but I am getting an error ERROR TypeError: this._subscribe is not a function. How do I resolve this? Is there a better and efficient way to look for changes in localStorage?

I am trying to access the localStorage using Angular 4 and look for changes in the localStorage values using the Observables:

Here's the code I have been working on:

userNameObservable: Observable<string>;
userName: String = '';
ngOnInit() {
    this.userNameObservable = Observable.create(
      Observable.of(localStorage.getItem('profileName'))
    );
    this.userNameObservable.subscribe((name: String) => {
      this.userName = name;
    })
}

but I am getting an error ERROR TypeError: this._subscribe is not a function. How do I resolve this? Is there a better and efficient way to look for changes in localStorage?

• javascript
• angular
• local-storage
• observable

• You can listen event listener on 'storage' Answer stackoverflow.com/a/4689033/5562006 – Arsen Karapetjan Commented Aug 9, 2017 at 11:28
• @ArsenKarapetjan the storage event is getting triggered only once and is not able to detect changes later on – starlight Commented Aug 9, 2017 at 11:40

5 Answers 5

Find below solution.

Add below code in your ngOnInit or AfterViewInit.

if (window.addEventListener) {
    window.addEventListener("storage", this._listener, false);
}

and declare the below function within the class.

private _listener = () => {
   // your logic here
}

also remove the listener when you done with listening or ngOnDestroy

window.removeEventListener("storage", this._listener, false);

Cheers.

We cannot keep a watch on Local Storage using Subject but we can make use of Subject in order to achieve the goals.

for that we'll have to create a subject,

private storageSub = new Subject<string>();

also create a observable,

public storageSubObs: Observable<any>

assign the observable for the Subject,

ngOnInit(): void {
      this.storageSubObs = this.storageSub.asObservable();
 }

now we have to trigger when the local storage is changed, for that we'll add the code right after the local storage is updated/changed.

  localStorage.setItem('item', yourItemData);
  this.storageSub.next('changed');

now where we want to know the change status we'll do,

this.storageSubObs..subscribe((data:string) => {
   // invokes when the localstorage is changed. 
 })

thanks & regards

If you want to detect events from local storage

window.addEventListener('storage', function(e) {
    console.log('event from localstorage')
    // any change/trigger in local storage will be catch here 
});


// for example you clear the local storage  

window.addEventListener('storage', function(e) {
  if (localStorage.length === 0) {
  console.log('localstorage empty')
  }
});

you can use TypeScript getters to achive this.

get userName() {
   return localStorage.getItem('profileName');
}

Observables won't work as local storage can be affected in many ways.

you can attach host listener to local storage as Storage interface emits storage event on global objects which it affects.

something like this

import { KeyboardEvent } from '@angular/core';

@Component({
  ...
  host: {
    '(document:storage)': 'onStorageChange($event)'
  }
})
export class MyComponent {
  onStorageChange(ev:KeyboardEvent) {
    // do something meaningful with it
    console.log(`Localstorage change/updated!`);
  }
}