How to look for changes in localStorage in Angular 4?

Question

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?

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

score 10 · Answer 1 · answered Jun 17 '19 at 04:50

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.

AMAL MOHAN N · Answer 2 · 2021-02-17T08:39:10.190

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

score 1 · Answer 3 · edited Mar 02 '22 at 19:47

1

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')
  }
});

edited Mar 02 '22 at 19:47

Julian

886
10
21

answered Nov 18 '21 at 12:42

U.Aasd

1,396
1
8
11

score 0 · Answer 4 · answered Aug 09 '17 at 11:30

0

you can use TypeScript getters to achive this.

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

answered Aug 09 '17 at 11:30

Raed Khalaf

1,997
2
13
29

1

This seems to work, but is not able to detect if any changes are done to localStorage values – starlight Aug 09 '17 at 11:41
if you change the localStorage values manually, of course it will not detect the changed, but the changes on the local storage must done programmatic ally, in this case it will detect it. – Raed Khalaf Aug 09 '17 at 11:43
I tried this with a list of 100 objects, the application ran very slow. its unsafe for larger arrays. – Gour Gopal Dec 24 '22 at 13:06

score -1 · Answer 5 · answered Jun 17 '19 at 05:08

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!`);
  }
}

`onStorageChange()` function is not even triggering in above script — Mohammad Fareed, May 17 '21 at 06:29

How to look for changes in localStorage in Angular 4?

5 Answers5