.
Ionic Local Storage and Session Storage
Ionic Local Storage and Session Storage
1) HTML5 introduced several methods of storing data within the clients browser. Two of these methods are local and session storage.
2) localStorage saves data until it is removed by the client or app.
3) sessionStorage saves data until the session ends, when the browser window/tab is closed.
4) We will be using a template source code for this tutorial. Download IonicSideMenu.zip . Unzip the folder and rename it as “IonicSideMenuStorageTest”.
1) Adding LocalStorage and SessionStorage Variable/Object in Ionic Services
Filename: js/services.js
angular.module('app.services', [])
.factory('$localstorage', ['$window', function($window) {
return {
set: function(key, value) {
$window.localStorage[key] = value;
},
get: function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
setObject: function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function(key) {
return JSON.parse($window.localStorage[key] || '{}');
}
}
}])
.factory('$sessionstorage', ['$window', function($window) {
return {
set: function(key, value) {
$window.sessionStorage[key] = value;
},
get: function(key, defaultValue) {
return $window.sessionStorage[key] || defaultValue;
},
setObject: function(key, value) {
$window.sessionStorage[key] = JSON.stringify(value);
},
getObject: function(key) {
return JSON.parse($window.sessionStorage[key] || '{}');
}
}
}])
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]);
|
2) Inject LocalStorage and SessionStorage into Ionic Controllers
angular.module('app.controllers', [])
.controller('homeCtrl', ['$scope', '$stateParams', '$localstorage',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,$localstorage) {
$localstorage.set('a',1);
$scope.a=$localstorage.get('a');
}])
.controller('cartCtrl', ['$scope', '$stateParams', '$sessionstorage',// The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams,$sessionstorage) {
$sessionstorage.set('b',2);
$scope.b=$sessionstorage.get('b');
}])
.controller('cloudCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams) {
}])
|
3) Insert the Ionic Variables Into HTML
Filename: templates/home.html
<ion-view title="Home" id="page1">
<ion-content padding="true" class="has-header">
<p>{{a}}</p>
</ion-content>
</ion-view>
|
Filename: templates/cart.html
<ion-view title="Cart" id="page2">
<ion-content padding="true" class="has-header">
<p>{{b}}</p>
</ion-content>
</ion-view>
|
No comments:
Post a Comment