Watch when localStorage value changes

[craftpip]

Hello again, I have two components, one in which i set a value in localStorage, i would like to watch when this value changes in my second component.

Thank you!

[DanielKucal]

Hi, this is something I'm actually thinking on at this moment. I think we initially should focus on adding this feature to services.... I can imagine it to work this way to give an example:

this.localStorageService.watch('fieldName').subscribe((newValue) => console.log(newValue));

But I'm not sure about it and open to other propositions. I want it to return an RxJS Observable.

You can give a vote for your favorite design here: https://goo.gl/forms/MU3CrQoTHPWyGZEl1 Thanks in advance!

PS: You can use core HTML5 functionality: window.addEventListener('storage', (event) => console.log(event)); to achieve your goal for now.

[jhillhouse92]

@DanielKucal When's the plan to implement this? I can help if needed.

[DanielKucal]

Hi @jhillhouse92, I'm just back from vacation. We don't actually need this functionality asap, but it seems easy to implement in webstorage.service. You can make a PR if you like. I think watch is a good name for it. It should be possible to watch for changes on one field and all storage when name is not provided (and maybe it could accept array of field names in the future). One thing i'm still not sure about is the format of returned data... I'd like to see some propositions about it, it'd be great help!

[jhillhouse92]

@DanielKucal For the short-term, I ended up just using a service to maintain changes and used a ReplaySubject and subscribed to it where I need. The service maintains persistence through LocalStorage and updates it through a method when needed also triggering the ReplaySubject.

[DanielKucal]

PR: https://github.com/zoomsphere/ngx-store/pull/23