Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

is it possible to subscribe observable in other tab browser with rxjs angular 5

I have an angular app, and there are two pages and I open them in each tab of browser, if I do some method in page 1, I want page 2 subscribe data change with rxjs and update data in page 2 like realtime app, is there any way to do that without websocket?, I've tried it with subscribe method but only page 1 listen that subscribe. this is page 1 called refresh method to update boolean value

this.service.doRefresh();

page 2 listen

this.service.$refresh.subscribe(x=>{//boolean value changed by page 1(tab1)
    if(x) {
        console.log(x);
        this.service.stopRefresh();
    }
});
like image 375
Mamen Avatar asked May 02 '18 07:05

Mamen


Video Answer


1 Answers

You can actually add event listeners to localStorage so you can use localStorage to "pass messages" between tabs

localStorage.setItem('yourKeyName', true)

window.addEventListener('storage', (event) => {
   if (event.key == 'yourKeyName'){
      //update data
   }
});

So when you change the value of something in localStorage on one page the other page can subscribe to the event of it changing

Browser support and more info: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#Browser_compatibility

like image 62
YourGoodFriend Avatar answered Oct 06 '22 16:10

YourGoodFriend