Local storage using Ionic

javascript angularjs ionic-framework local-storage ionic

20,849

Solution 1

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

Solution 2

Just to make sure to make more users aware of the fact, that the localstorage doesn't necessarily have to be persistent (on iOS), please take a look at:

How permanent is local storage on Android and iOS?

Therefore I would recommend to use the nativestorage in your wrapper instead:

https://github.com/TheCocoaProject/cordova-plugin-nativestorage

20,849

Author by

Jacob Brauchler

I am a junior in Computer Science at the University of Colorado Boulder. I currently hold an intern position at Pensco Trust Company as a Web Developer. I may not know everything but I enjoy learning and helping others if I can.

Updated on October 05, 2020

Comments

Jacob Brauchler over 3 years

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