What things are common between browser tabs ? HTML5 Local Storage, Cookies. Now I will use HTML5 local storage for to store information between tabs. To maintain localStorage, you have to use ngStorage directive

Include below scripts

One is AngularJS minified JS file, ngStorage minified JS file
<script src="http://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>

Script

Hold $localStorage to $storage of scope. Here you can assign default values using $default
angular.module('app', ['ngStorage']).controller('Ctrl', function($scope, $localStorage) {
    $scope.$storage = $localStorage.$default({
        name : 'jack'
    });
});

Markup

<input ng-model="$storage.name"/>

Demo

In this demo, you can see input changes will be reflected in Tab 2 
  Tab 1   Tab 2

Watch Local Storage Variable

Here you can watch entire local Storage like below
$scope.$storage = $localStorage.$default({
    name : 'jack'
});

$scope.$watch(function() {
      return angular.toJson($scope.$storage);
   }, function() {
      alert('The name is *** '+$scope.$storage.name);
});

Demo

In this demo, you will see alert from tab 3 from changes of Tab 1

3 comments:

  1. In anglar 2 how we do it the same functionality ?

    ReplyDelete
  2. Cisco 200-125 dumps Questions And Answers We Provide Our Customers With Latest and up-to-date Dumps Questions & Answers with 100% Exam Passing Guarantee. We Promise Exceptional Success in First Attempt.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts