Retrieve localstorage value when value is change in Ionic 2

Question

I am using ionic 2 framework and I have tried using local storage to store a network status

this.local = new Storage(LocalStorage);
this.local.set(\"status\"         


        

Answer 1

This can be achieved with a BehaviorSubject along with the Storage module from Ionic.

Create a BehaviorSubject that you call .next() whenever you set a key in Storage and subscribe to that BehaviorSubject to get the updated value.

A code example of this:

let storageObserver = new BehaviorSubject(null)

this.storage.set("key", "data")
storageObserver.next(null)

setTimeout(() => {
  this.storage.set("key", "new data")
  storageObserver.next(null)
}, 5000)

storageObserver.subscribe(() => {
  this.storage.get("key")
    .then((val) => console.log("fetched", val))
})

This will set a key in local storage which will be logged to the console, and asynchronously update that key after 5 seconds which then will be logged again to the console. You could refactor the setting of the key and updating the BehaviorSubject to a function.

Answer 2

How to dynamically call this function when my value change, is there any method?

A better solution will be using observables. You can use observables in your methods to emit events when a property is changed and then execute the code you need to execute.

This is a very simple example of using observables:

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class StorageService {

    private storageObserver: any;
    public storage: any;

    constructor(...) {
        this.storageObserver= null;

        this.storage= Observable.create(observer => {
            this.storageObserver= observer;
        });
    }

    public yourMethod(): void { 

        // This method changes the value of the storage
        // ...

        // Notify to the subscriptor that the value has changed
        this.storageObserver.next(newValue);
    }

And then in your page:

@Component({
  templateUrl: 'build/pages/my-new-page/my-new-page.html',
  providers: [..., StorageService ]
})
export class MyNewPage {

    constructor(..., private storageService : StorageService ) {

        // Initialize all the things you need
        // ... 

        this.storageService.storage.subscribe((newValue) => {
                // This code will execute when the property has changed and also
                // you'll have access to the object with the information that
                // your service sent in the next() call.
                this.doWhatYouWant(newValue);
        });
    }
}

===========================================

EDIT:

If you need to update something in the view, beacuse of something that has changed in the background, you will have to let Angular know of that change. One way to do it is by using Zones. You can check my answer here to know how to do it.

Answer 3

Would it suffice to poll it? It might not be the cleanest way but it would get the data you need.

setInterval(function() {
  // Check localStorage every 2 seconds
}, 2000);