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

Pradeep Sahoo
8y
11.2k
0
1

Blog

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

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', function ($scope, $localStorage, $window) {
$scope.Save = function () {
$localStorage.LocalMessage = $scope.Name + $scope.Address;
$window.open('http://localhost:1950/WebSite12/testpopup.html', 'testpopup', 'width=500,height=400');
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<div style="height: 500px; width: 400px; border: 5px solid gray;">
<table>
<tr>
<td>
<h4>
Passing Data from parent Page to child Page</h4>
</td>
</tr>
<tr>
<td>
Name
<input type='text' ng-model="Name" />
</td>
</tr>
<tr>
<td>
Address
<input type='text' ng-model="Address" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Save" ng-click="Save()" />
</td>
</tr>
</table>
</div>
</body>
</html>

Child Page – testchildPopup.Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController1', function($scope, $localStorage, $window)
{
$scope.Get = function()
{
$window.alert("Data from parent page is: " + $localStorage.LocalMessage);
}
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController1"> <input type="button" value="Get" ng-click="Get()" /> </div>
</body>
</html>