Post
Ask Question

Passing the Data from Parent Page to Child Page using Local Storage in AngularJS

In a Single Page Application there is a very common need that we need to pass the data between the pages and tabs from the parent page. Local storage helps us to pass the data from parent page to child pages in SPA applications.

Local storage store data without having any expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored. It stores data between 2MB and 10MB data in the browser. It works as a client side session management in angular Js application. 

Let us see the example and code

We have a parent page , we want to pass the information to a pop up page using localstorage . Angular provide a service $localStorage to achieve this.

Parent Page – testParent.Html

  1. <html>  
  2. <head>  
  3.     <title></title>  
  4. </head>  
  5. <body>  
  6.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>  
  7.     <script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>  
  8.     <script type="text/javascript">  
  9.         var app = angular.module('MyApp', ["ngStorage"])  
  10.         app.controller('MyController', function ($scope, $localStorage, $window) {  
  11.             $scope.Save = function () {  
  12.                 $localStorage.LocalMessage = $scope.Name + $scope.Address;  
  13.   
  14.   
  15.                 $window.open('http://localhost:1950/WebSite12/testpopup.html', 'testpopup', 'width=500,height=400');  
  16.             }  
  17.   
  18.         });  
  19.     </script>  
  20.     <div ng-app="MyApp" ng-controller="MyController">  
  21.         <div style="height: 500px; width: 400px; border: 5px solid gray;">  
  22.             <table>  
  23.                 <tr>  
  24.                     <td>  
  25.                         <h4>  
  26.                             Passing Data from parent Page to child Page</h4>  
  27.                     </td>  
  28.                 </tr>  
  29.                 <tr>  
  30.                     <td>  
  31.                         Name  
  32.                         <input type='text' ng-model="Name" />  
  33.                     </td>  
  34.                 </tr>  
  35.                 <tr>  
  36.                     <td>  
  37.                         Address  
  38.                         <input type='text' ng-model="Address" />  
  39.                     </td>  
  40.                 </tr>  
  41.                 <tr>  
  42.                     <td>  
  43.                         <input type="button" value="Save" ng-click="Save()" />  
  44.                     </td>  
  45.                 </tr>  
  46.             </table>  
  47.         </div>  
  48. </body>  
  49. </html>  

Child Page – testchildPopup.Html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>  
  6.     <script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>  
  7.     <script type="text/javascript">  
  8.         var app = angular.module('MyApp', ["ngStorage"])  
  9.         app.controller('MyController1', function($scope, $localStorage, $window)  
  10.         {  
  11.             $scope.Get = function()  
  12.             {  
  13.                 $window.alert("Data from parent page is: " + $localStorage.LocalMessage);  
  14.             }  
  15.         });  
  16.     </script>  
  17. </head>  
  18.   
  19. <body>  
  20.     <div ng-app="MyApp" ng-controller="MyController1"> <input type="button" value="Get" ng-click="Get()" /> </div>  
  21. </body>  
  22.   
  23. </html>  

 

Output:

 

Here we have assigned the values to local storage and fetching the values of local storage in the child pop up page.

Hope you got the information how to pass information between parent page and child page in angular js. Thanks for Reading.