AngularJS $localstorage not working in other tab

Question

I am trying to execute a fuction when a change occurs in one tab, the change should reflect in other tab too.

i write this and it is working fine in the same tab i change even i check manually browser localstorage and see it works nice.

but the problem, the change not reflect in other tab too.

I mean, i opened two tab and when i change something in one tab, in other tab it should reflect.

Whenever any change occurs in one tab, 2nd tab should execute this $scope.getAllContact(); and wait for another change, if another change occurs, $scope.getAllContact(); should be executed.

$localStorage.editedData = response.data;
      $scope.editedID = $localStorage.editedData.id;
      if (response.data.id == $localStorage.editedData.id) {
        $localStorage.isChanged = true;
      }

      while ($localStorage.isChanged == true) {
        $scope.getAllContact();
        break        
      }

I write above code;

Ignore below this code if you undertand above few line, below code is fuction, when change occurs, the fuction should be executed:

$scope.getAllContact = function() {
    var data = $http.get("http://127.0.0.1:8000/api/v1/contact")
    .then(function(response) {
      $scope.contacts = response.data;
      // below two line of codes will reload in every 10 millisecond if a request succcess
      // in result, you will see refleation in other browser if any change occurs in another browser
      // do nothing for now
    }, function(response) {
      //$scope.connectionError = "Opps ! Having Trouble in loading this page ! \n  It's Connection Error !!!";
      // below two line as as above two commented line
      // do nothing for nw
    });
  };
  $scope.getAllContact();

You need to run continues loop for time i.e timeInterval and put your while condition there — p u, May 22 '19 at 05:57
your condition will not execute by its own. you need to check your condition in timeinterval — p u, May 22 '19 at 06:16
May be, you can make use of `$watch`. As you want to do some action when your value is getting changed. https://stackoverflow.com/questions/15112584/how-do-i-use-scope-watch-and-scope-apply-in-angularjs — Harshad, May 22 '19 at 06:35
Yes, i tried $watch but may be use it wrongly, i dont know how to implement this — , May 22 '19 at 06:37
As per your question your looking for two-way binding between tabs(change occurs in one tab, the change should reflect in other tab too).Let me know both are in same controller or not — Badri Chorapalli, May 22 '19 at 08:03

score 0 · Accepted Answer · answered May 22 '19 at 07:43

0

You need to check your local storage at a certain time difference

 setInterval(function(){
     if ($localStorage.isChanged == true) {
            $scope.getAllContact();      
          }  
          }
    }, 500);

answered May 22 '19 at 07:43

p u

1,395
1
17
30

score 0 · Answer 2 · answered May 22 '19 at 08:06

0

See below code may helpfull

$scope.$apply(function() {
    $scope.contacts = response.data;
});

or

As per my assumption at a time you can see only one tab. So,call $scope.getAllContact() whenever your clicking on second tab.

answered May 22 '19 at 08:06

Badri Chorapalli

89
7

AngularJS $localstorage not working in other tab

2 Answers2