How to add local storage in angular?

Question

I made a table using angular, everything works great for now. Now I would like to add local storage feature. I really tried to achieve this but I came to a point I don't now what to do. I tried using gsklee/ngStorage and gregory/angular-local-storage library but I am having problem implementing it to my current code.

Can someone take a look? Thank you for your time.

script.js

(function() {
"use strict";

 var table = angular.module('myTable', ['angularUtils.directives.dirPagination','ngStorage']); 

table.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start;
        return input.slice(start);
        }
        return [];
    }
});

    table.controller('TodoCtrl', function($scope, $http, $localStorage) {
    $http.get('todos.json').then(function(res) {
        $scope.todos = res.data;
    });

    $scope.currentPage = 1; 
    $scope.entryLimit = 5;

    $scope.sort = function (keyname) {
        $scope.sortKey = keyname;
        $scope.reverse = !$scope.reverse;
    };  

    $scope.DeveloperDelete = function (id){
        var result = confirm('Are you sure?');
        if (result === true) {  
            var index = getSelectedIndex(id);
            $scope.todos.splice(index, 1);
        };
    };

    function getSelectedIndex(id){
        for(var i = 0; i < $scope.todos.length; i++)
            if($scope.todos[i].id == id)
                return i;
            return -1;  
    };

    $scope.addDeveloperRow = function(){        
        $scope.todos.push({ 'id':$scope.id, 'text': $scope.text, 'color':$scope.color, "progress:":$scope.progress});
        $scope.id='';
        $scope.text='';
        $scope.color='';
        $scope.progress='';
    };  

}); 


})();

index.html
















  
      
        My todo list
      

      
        Search
        
          
            
              
              
                  
          
        
      

         
      Show number of records
        
          
            
              
                
                  
          
        
      

         
        Show custom table
          
            
                  
                
                  
                    
            
          
      

      
      


        
          
            
              
                  
          
        
      


      
 
      
          
            Id
              
            
            Text
              
            
             Color
              
            
            Progress
              
            
            CRUD
            
          
            
              
                {{ todo.id }} 

                
              

                              
                {{ todo.text }}
                
              
              
                {{todo.color}}
                
              
              
                {{todo.progress}}%

Deblaton Jean-Philippe · Accepted Answer

Have a look at this implementation I did for dealing with local storage. This is really simple and really does not need any third party library.

(function() {
    'use strict';
    angular.module('myApp')
        .service('LocalStorageService', [
            '$window', function($window) {
                var service = {
                    store: store,
                    retrieve: retrieve,
                    clear: clear,
                    clearAll: clearAll
                };

                return service;

                function store(key, value) {
                    $window.localStorage.setItem(key, angular.toJson(value, false));
                }

                function retrieve(key) {
                    return $window.localStorage.getItem(key);
                    // return angular.fromJson($window.localStorage.getItem(key));
                    // I'm not 100% sure, but I think I need to de-serialize the json that was stored
                }

                function clear(key) {
                    $window.localStorage.removeItem(key);
                }


                function clearAll() {
                    $window.localStorage.clear();
                }


            }
        ]);
})();

If you want to use it, you just need to inject it inside your controller, and begin to use it.

eg :

table.controller('TodoCtrl', function($scope, $http, LocalStorageService) {
    $scope.todos = LocalStorageService.retrieve('todos');
    if (!$scope.todos){    // if 'todos' was not previously stored, $scope.todos will be null
        $http.get('todos.json').then(function(res) {
            $scope.todos = res.data;
            LocalStorageService.store('todos', $scope.todos);
        });
    }

}

How to add local storage in angular?

Answers (1)

Related Questions