LocalStorage and SessionStorage made easy in AngularJs

HTML5 provides lot of new features and Local storage is one of the popular ones, so how to use it in angular project and do it in angular way, well there are quite a few local storage modules for angular, but two most popular ones are  angular-local-storage from grevory and ngStorage from gsklee, in this tutorial I am going to use ngStorage to show you how easy it is to use local storage and session storage in AngularJS.

What we are going to build -

We are going to make simple app which uses local storage to store counter for boxes and we will have two buttons to add or subtract to counter, and based on counter we are going to make boxes in the browser.

html 5 angular storage example

Directory Structure -

project_root
|    css
|    |   Main.css
|    js
|    |   bower_components
|    |   |   angular
|    |   |   ngstorage
|    |   storage.js
|    localstorage.html

What We need-

We only need AngularJs and ngStorage module for this simple tutorial, let's install it using bower.

In your terminal, navigate to js folder and run following commands.

AngualrJS

bower install angular

ngStorage

bower install ngstorage

Let's build our markup( localstorage.html ) - 

Let's start with simple HTML boilerplate, first we must add angular and ngstorage scripts in our markup, after that we just need one single controller which I named BoxController, you can name it whatever you want, this controller has two buttons Add box and Remove Box, when clicked we will call associated functions to add or remove boxes.

At the last, we have a list which holds total numbers of boxes, ng-repeat directive will take care of items and will update whenever counter is changed.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>ngStorage Example</title>
	<link rel="stylesheet" href="css/main.css">
	<script type="text/javascript" src="js/bower_components/angular/angular.min.js"></script>
	<script type="text/javascript" src="js/bower_components/ngstorage/ngStorage.min.js"></script>
</head>
<body>

		<h1>Add or Remove Boxes</h1>		
		<div ng-controller="BoxController">
			<button ng-click="addBox()">Add Box</button>
			<button ng-click="removeBox()">Remove Box</button>
		
			<div id="boxes">
				<ul ng-repeat="item in range">
					<li>
						<div class="box">
							Box {{ item }}</li>	
						</div>
						
				</ul>
			</div>
		</div>
		
	
	
	<script type="text/javascript" src="js/storage.js"></script>
</body>
</html>

Add some styling( css/ main.css ) -

We are not going to create anything fancy but let's make it  less ugly.

body {
	font-family: arial;
}
ul {
	list-style: none;
}
li {
	float: left;
}
.box {
	padding : 50px;
	background : #333;
	color : white;
	margin : 10px 20px;
	
}
button {
	border : 1px solid #333;
	padding: 5px 10px;
	color : #333;
	background: #eee;
	border-radius: 3px;

}

Our Angular Code ( js/storage.js ) -

We are going to start with our angular bootstrap code, here we will add our ngStorage dependency.

Now let's create our BoxController, in this controller we will inject $scope, $localStorage, $sessonStorage, later ones are from ngStorage module, now just assign $localStorage or $sessionStorage  as variable in $scope, and now we can perform any operation in our local storage as a variable.

//bootstraping angular and adding ngStorage module
var app = angular.module('app', ['ngStorage']);

app.controller('BoxController', function($scope, $localStorage, $sessionStorage) {
	//Assigning $localstorage to $session.storage 
	$scope.storage = $localStorage;
	//We have counter but for ng-repeat to work 
	//we need array so creating range array to store each counter value 
	$scope.range = [];
	for(var x = 0, len =  $scope.storage.counter || 0; x < len ; x++)
	{
		$scope.range.push(x+1);
	}
	
	//increasing counter and pushing value in range array
	$scope.addBox = function() {
			$scope.storage.counter = ( typeof $scope.storage.counter !== "undefined" ) ? $scope.storage.counter + 1 : 1;
			$scope.range.push($scope.storage.counter);
	};
	
	//decreasing counter and removing value from range array
	$scope.removeBox = function() {
		$scope.storage.counter = ( typeof $scope.storage.counter !== "undefined" && $scope.storage.counter > 0) ? $scope.storage.counter  - 1 : 0;
		$scope.range.pop($scope.storage.counter);		
	}	
		
});

We can use $sessionStorage same way As we did $localStorage, If you have any trouble with code or need some help, please tell us in the comment section or ask the community in our forum.

Something to say? Tell us in comment section.