ng-angular: 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>

<script src="../angular/ngStorage-master/ngStorage.min.js"></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>

<h5> Using ngStorage (local and session web storage)</h5>

<table>

<tr>

<td>Small term:</td>

<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>

</tr>

<tr>

<td>

Delete Small And Big Terms from Local Storage</button>

</td>

<td>

Delete All Terms from Local/Session Storage</button>

</td>

<td>

Reset Small And Big Terms from Local Storage To 0</button>

</td>

</tr>

</table>

</div>

</body>

</html>

ng-angular

Angular JS Magazine

luni, 12 ianuarie 2015

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

Un comentariu: