Menu
I am trying to hook my app up to local storage so that I can have the data saved on the users device and not being reset each time the app is closed. My only issue is I can't figure out to actually link local storages to my array of objects. Any help is greatly appreciated. I have added any code that I believe is relevant.
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('gas-mileage-tracker', ['ionic', 'ionic.utils', 'gas-mileage-tracker.controllers', 'gas-mileage-tracker.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.run(function($localstorage) {
var mileages = [];
$localstorage["mileages"] = JSON.stringify(mileages);
$localstorage.set('name', 'mileages');
console.log($localstorage.get('name'));
$localstorage.setObject('post', mileages=[{
id: 0,
mpg: 20,
car: "1998 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Shell"
}]);
var post = $localstorage.getObject('post');
console.log(post);
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.calculations', {
url: '/calculations',
views: {
'tab-calculations': {
templateUrl: 'templates/tab-calculations.html',
controller: 'CalculationsCtrl'
}
}
})
.state('tab.mileages', {
url: '/mileages',
views: {
'tab-mileages': {
templateUrl: 'templates/tab-mileages.html',
controller: 'MileagesCtrl'
}
}
})
.state('tab.mileage-details', {
url: '/mileages/:mileageId',
views: {
'tab-mileages': {
templateUrl: 'templates/mileage-details.html',
controller: 'MileageDetailsCtrl'
}
}
})
.state('tab.gas_stations', {
url: '/gas_stations',
views: {
'tab-gas_stations': {
templateUrl: 'templates/tab-gas_stations.html',
controller: 'GasStationsCtrl'
}
}
})
.state('tab.cars', {
url: '/cars',
views: {
'tab-cars': {
templateUrl: 'templates/tab-cars.html',
controller: 'CarsCtrl'
}
}
})
$urlRouterProvider.otherwise('/tab/mileages');
});
controllers.js
angular.module('gas-mileage-tracker.controllers', [])
.controller('CalculationsCtrl', function($scope, Mileages) {
$scope.add = function(mileage) {
Mileages.add(mileage);
}
})
.controller('MileagesCtrl', function($scope, Mileages) {
$scope.mileages = Mileages.all();
$scope.remove = function(mileage) {
Mileages.remove(mileage);
};
$scope.add = function(mileage) {
Mileages.add(mileage);
};
})
.controller('MileageDetailsCtrl', function($scope, $stateParams, Mileages) {
$scope.mileage = Mileages.get($stateParams.mileageId);
})
.controller('GasStationsCtrl', function($scope, $stateParams, Mileages) {
$scope.mileages = Mileages.all();
$scope.mileage = Mileages.get($stateParams.mileageId);
})
.controller('CarsCtrl', function($scope, $stateParams, Mileages) {
$scope.mileages = Mileages.all();
$scope.mileage = Mileages.get($stateParams.mileageId);
})
services.js
angular.module('gas-mileage-tracker.services', [])
.factory('Mileages', function() {
var mileages = [{
id: 0,
mpg: 20,
car: "1998 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Shell"
}, {
id: 1,
mpg: 16,
car: "2002 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Loaf N' Jug"
}, {
id: 2,
mpg: 18,
car: "2002 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Conoco"
}, {
id: 3,
mpg: 17,
car: "1998 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Bradley"
}, {
id: 4,
mpg: 18,
car: "2002 Toyota 4runner",
miles_driven: "",
gallons_added: "",
gas_station: "Texaco"
}];
return {
all: function() {
return mileages;
},
remove: function(mileage) {
mileages.splice(mileages.indexOf(mileage), 1);
},
add: function(mileage) {
mileage.id = mileages.length;
mileage.mpg = mileage.miles_driven/mileage.gallons_added
mileages.push({
editMode: false,
id: mileage.id,
mpg: mileage.mpg,
car: mileage.car,
gas_station: mileage.gas_station
});
console.log(mileage); // Log the original mileage
console.log(mileages[mileage.id]); // Log the added mileage
mileage.mpg= '';
mileage.miles_driven= '';
mileage.gallons_added= '';
mileage.car= '';
mileage.gas_station= '';
},
edit: function(mpg) {
mileage.editMode = true;
mileages.mpg = mileage.mpg
console.log(mileage);
},
save: function(mpg) {
mileage.editMode = false;
},
get: function(mileageId) {
for (var i = 0; i < mileages.length; i++) {
if (mileages[i].id === parseInt(mileageId)) {
return mileages[i];
}
}
return null;
}
};
});
utils.js
angular.module('ionic.utils', [])
.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] || '{}');
}
}
}]);
867
Ionic Storage abstracts all available mechansims for data storage such as native Cordova SQLite and browser storage APIs like IndexedDB, WebSQL or localStorage.
Ionic Local Storage uses the local storage system of browser for key/value pairs storing. The limit of Local Storage is only 5MB.
Using Storage in Ionic App To store the data on local storage or to access Native Storage methods, you have to import the NativeStorage module from the '@ionic-native/native-storage/ngx' package; likewise, add the NativeStorage package into the constructor() method as displayed below.
Data Storage - Ionic DocumentationIonic Storage is a free, open source alternative for indie devs, students & hobbyists. It provides an easy way to store key/value pairs and JSON objects.
Use this service to manage, create, retrieve, or delete LocalStorage variables in each of its controllers. I hope it will help.
.factory('sessionService',['$http',function($http){
return {
set:function(key,value){
return localStorage.setItem(key,JSON.stringify(value));
},
get:function(key){
return JSON.parse(localStorage.getItem(key));
},
destroy:function(key){
return localStorage.removeItem(key);
},
};
}])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
