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] || '{}');
}
}
}]);
