get data from local storage every 1 second

Question

I have created an app in angular 8 and in this component I have a model in which users can choose a choice and I make a function in TS. file to set it in local storage, and I want to get in another tab to get data in local storage every 1 second, can any body help me?

 <span>Branch: {{branch}}</span>

which I want to get data in this variable every 1 second here is HTML

<div class="header-bar container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <span>Branch: {{branch}}</span>


                <!-- Button trigger modal -->
                <button type="button" id="openModal" (click)="getstores()" #openModal
                    class="btn btn-outline-dark btn-sm ml-2" data-toggle="modal" data-target="#staticBackdrop">
                    Choose Branch
                </button>

                <!-- Modal -->
                <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
                    aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">
                                    Choose your nearest branch <i class="fa fa-smile-o" aria-hidden="true"></i>
                                </h5>
                                <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button> -->
                            </div>
                            <div class="modal-body">
                                <div class="form-check form-check-inline" *ngFor="let d of data">
                                    <input class="form-check-input" type="radio" name="store" id="inlineRadio1"
                                        (change)="radioChangeHandler($event)" value="{{d.name}}" required>
                                    <label class="form-check-label" for="inlineRadio1">{{d.name}}</label>

                                </div>
                            </div>
                            <div class="modal-footer">
                                <span class="mr-auto">If you don't choose a store <strong>Zamalek</strong> branch will be default</span>
                                <button type="submit" class="btn btn-outline-danger" (click)="default()" data-dismiss="modal">Ok</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-right">
                <i class="fa fa-user"></i> <span>My account</span> &nbsp;
                <i class="fa fa-pencil-square-o"></i> <span>Checkout</span>
            </div>
        </div>
    </div>
</div>

and TS file

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { loadTranslations } from '@angular/localize';
import { StoresService } from '../shared/stores.service';

@Component({
  selector: 'app-header-bar',
  templateUrl: './header-bar.component.html',
  styleUrls: ['./header-bar.component.css']
})
export class HeaderBarComponent {
  @ViewChild('openModal') openModal:ElementRef;
  data : string;

  constructor(private service : StoresService) {
    // this.data = new Array<string>();
   }

  ngAfterViewInit() {
    this.openModal.nativeElement.click();
    return this.setlocal();
  }

  getstores(){
    this.service.getStores().subscribe(data=>{
      this.data = data;
    });
  }
  
  radioChangeHandler(event : any){
    this.data = event.target.value;
    localStorage.setItem("store",this.data);
  }

  branch = localStorage.getItem("store");

  default(){
    
    localStorage.getItem("store");
  }

 setlocal(){
  if(localStorage.getItem("store")==null){
    localStorage.setItem("store","Zamalek");
  }
 }

 
}

Answer 1

constructor() {
    setInterval(() => {
        // get data from LS
    }, 1000);
}

Or use observables: https://stackoverflow.com/a/46096664/4799922