[Cordova] Ionic's localStorageService

En esta ocasión veremos como implementar un simple sistema de almacenamiento llave-valor para nuestras aplicaciones. A pesar de su simplicidad es muy útil si queremos guardar temporalmente información, pero poco eficaz por sí solo si es que queremos hacer consultas de datos cuando tenemos mucha información.

utils.js

Acá definimos un Factory para leer/escribir valores o cadenas JSON para las estructuras de datos.


    
      
        
  
    
    

        


  


  
        
          
          angular.module('ionic.utils', [])
        
        
          
          

        
        
          
          .factory('localStorageService', ['$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] || '{}');
        
        
          
                  },
        
        
          
                  remove: function (key) {
        
        
          
                      $window.localStorage.remove(key);
        
        
          
                  }
        
        
          
              }
        
        
          
          }]);
        
  



    

  


      
      
        view raw
        
          utils.js
        
        hosted with ❤ by GitHub

app.js

Luego, "instalamos" el módulo ionic.utils que acabamos de crear hace un instante.


    
      
        
  
    
    

        


  


  
        
          
          angular.module('greenbookApp', ['ionic', 'ionic.utils'])
        
  



    

  


      
      
        view raw
        
          app.js
        
        hosted with ❤ by GitHub

index.html

Agregamos las referencias necesarias a la raíz de nuestro SPA.


    
      
        
  
    
    

        


  


  
        
          
          <head>
        
        
          
            <meta charset="utf-8">
        
        
          
            <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        
        
          
            <title></title>
        
        
          
          

        
        
          
            <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        
        
          
            <link href="css/style.css" rel="stylesheet">
        
        
          
          

        
        
          
            <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        
        
          
            <link href="css/ionic.app.css" rel="stylesheet">
        
        
          
            -->
        
        
          
          

        
        
          
            <!-- ionic/angularjs js -->
        
        
          
            <script src="lib/ionic/js/ionic.bundle.js"></script>
        
        
          
          

        
        
          
            <!-- cordova script (this will be a 404 during development) -->
        
        
          
            <script src="cordova.js"></script>
        
        
          
          

        
        
          
            <!-- your app's js -->
        
        
          
            <script src="app/utils.js"></script>
        
        
          
            <script src="app/app.js"></script>
        
        
          
            <script src="app/demo/foo-ctrl.js"></script>
        
        
          
          </head
        
  



    

  


      
      
        view raw
        
          index.html
        
        hosted with ❤ by GitHub

foo-ctrl.js

¡Y listo! No olvidemos que la persistencia de la información dependerá de las limitaciones de espacio en disco y el SO.


    
      
        
  
    
    

        


  


  
        
          
          (function () {
        
        
          
              'use strict';
        
        
          
          

        
        
          
              angular
        
        
          
                .module('myApp')
        
        
          
                .controller('MyCtrl', ['$scope', 'localStorageService', MyCtrl]);
        
        
          
          

        
        
          
              function MyCtrl($scope, localStorageService) {
        
        
          
                  var vm = this;
        
        
          
                  localStorageService.set("foo", "somevalue");
        
        
          
                  vm.title = localStorageService.get("foo");
        
        
          
              }
        
        
          
          })();
        
  



    

  


      
      
        view raw
        
          foo-ctrl.js
        
        hosted with ❤ by GitHub

Como mencione al inicio, esta alternativa poco se presta para hacer consultas complejas de los datos almacenados, pero si guardamos un arreglo en JSON y lo usamos junto con linq.js las cosas cambian :)!

Esta simple implementación es útil, sin embargo hay otras alternativas en GitHub e inclusive en Ionic 2 que también nos pueden ayudar en este asunto.

Más adelante espero tener la oportunidad de compartir hacerca de SQLite en un proyecto Ionic, pero antes tendré que hablar un poco sobre ngCordova.

Ad unit

Eventos

Populares