Angular JS Magazine

luni, 12 ianuarie 2015

Angular JS - Read/Write/Delete/Reset form Web Storage (Local/Session Storages) Using ngStorage

In this tip you can see how to work with Web Storage (local and session) using the ngStorage module.

Usage:

     $scope.terms = {small: "0", big: "0", percent: "100"};
  • write default value in local/session storage
          $localStorage = $localStorage.$default({small: $scope.terms.small});          
          $localStorage = $localStorage.$default({big: $scope.terms.big});
          $localStorage = $localStorage.$default({percent: $scope.terms.percent});
          $sessionStorage = $sessionStorage.$default({result: 0});
  • overwrite an exiting value
         $localStorage.small = $scope.terms.small;
         $localStorage.big = $scope.terms.big;
         $sessionStorage.result = result;
  • delete all
        $localStorage.$reset()
        $sessionStorage.$reset();
  • delete an object
          delete $localStorage.small;
          delete $localStorage.big;
  • reset an object
          $localStorage.$reset({small: "0",big: "0", percent: "100"});

Example:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <script src="../angular/ngStorage-master/ngStorage.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <script>
        angular.module("myModule", ['ngStorage'])
                .controller("myCtrl", function ($scope, $localStorage, $sessionStorage) {

                    $scope.terms = {small: "0", big: "0", percent: "100"};

                    $scope.$l_storage = $localStorage;
                    $scope.$s_storage = $sessionStorage;
                            
                    $localStorage = $localStorage.$default({small: $scope.terms.small});             
                    $localStorage = $localStorage.$default({big: $scope.terms.big});  
                    $localStorage = $localStorage.$default({percent: $scope.terms.percent}); 
                    $sessionStorage = $sessionStorage.$default({result: 0});

                    $scope.addTermsInLocalStorage = function(){
                      $localStorage.small = $scope.terms.small;
                      $localStorage.big = $scope.terms.big;

                      if(angular.isUndefined($localStorage.percent)){                       
                        $localStorage = $localStorage.$default({percent: $scope.terms.percent}); 
                      }
                      
                      var result = ($localStorage.small * $localStorage.percent)/$localStorage.big;
                      $scope.addResultInSessionStorage(result);
                    }; 

                    $scope.addResultInSessionStorage = function(result) {                  
                      $sessionStorage.result = result;
                    };                   

                    $scope.deleteSmallAndBigTermsFromLocalStorage = function(){                        
                      delete $localStorage.small;
                      delete $localStorage.big;
                    }

                    $scope.resetSmallAndBigTermsFromLocalStorageTo0 = function(){                        
                      $scope.terms = {small: "0", big: "0", percent: "100"};
                    }

                    $scope.deleteAllTermsFromLocalAndSessionStorage = function(){                        
                      $localStorage.$reset(); //delete all
                      $sessionStorage.$reset();
                     //$localStorage.$reset({small: "0",big: "0", percent: "100"}); //reset a specific object
                    }                    

                    $scope.$watch('terms', 'addTermsInLocalStorage()', true);
                });
    </script>
</head>
<body>
<div ng-app="myModule">
    <div id="myPanel" class="panel" ng-controller="myCtrl">
    <h5> Using ngStorage (local and session web storage)</h5>
    <table>  
      <tr>
        <td>Small term:</td>
        <td><input class="form-control" ng-model="terms.small"></td>    
        <td rowspan="2" align="center">
           <p>Result of computation: <span class='label label-primary'>
                {{$l_storage.small}} represents {{$s_storage.result | number:3}}% 
                      from {{$l_storage.big}}</span>
           </p>
       </td>
      </tr>
      <tr>
        <td>Big term:</td>
        <td><input class="form-control" ng-model="terms.big"></td>        
      </tr>             
      <tr>
       <td>
        <button ng-click="deleteSmallAndBigTermsFromLocalStorage()">
         Delete Small And Big Terms from Local Storage</button>
       </td>    
       <td>
        <button ng-click="deleteAllTermsFromLocalAndSessionStorage()">
          Delete All Terms from Local/Session Storage</button>
       </td>
       <td>
        <button ng-click="resetSmallAndBigTermsFromLocalStorageTo0()">
          Reset Small And Big Terms from Local Storage To 0</button>
       </td>
      </tr>
     </table>     

    </div>
</div>
</body>
</html>