<!-- strictly for styling and demo purposes -->

<link rel="stylesheet" href="assets/foundation.min.css">

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

<script src="assets/jquery-1.9.1.min.js"></script>

<link href="assets/prettify.css" rel="stylesheet" type="text/css" />

<script src="assets/prettify.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

$("pre", this).addClass("prettyprint");

});

</script>

<!-- end unnecessary files for demo -->

<script src="../components/angular/angular.min.js"></script>

<script src="../components/angular-cookies/angular-cookies.min.js"></script>

<script src="../src/angularLocalStorage.js"></script>

<script>

var eS = angular.module('exampleStore', ['angularLocalStorage']);

eS.controller('MainCtrl', ['$scope', 'storage', function ( $scope, storage ) {

storage.bind($scope, 'test', 'Some Default Text');

$scope.clearTest = function () {

storage.remove('test');

};

}]);

</script>

<div ng-app="exampleStore">

<div ng-controller="MainCtrl">

<div class="hero">

<h1>the simplest localStorage implementation, <b>ever</b></h1>

<h3>angular localStorage module</h3>

</div>

<div class="row">

<div class="large-12 columns">

<h2>How to use localStorage module</h2>

</div>

</div>

<div class="row">

<div class="large-4 columns">

<p>Variable: <b>{{test}}</b></p>

<label>localStorage variable value:</label> <input type="text" ng-model="test">

<a ng-click="clearTest()">Clear Value from LC</a>

<p style="font-size: 12px;"><i>Change the value in the textbox and refresh the page!</i></p>

</div>

<div class="large-8 columns">

<pre>

var eS = angular.module('exampleStore', ['angularLocalStorage']);

eS.controller('MainCtrl', ['$scope', 'storage', function ( $scope, storage ) {

storage.bind($scope, 'test', 'Some Default Text');

$scope.clearTest = function () {

storage.remove('test');

};

}]);

</pre>

</div>

</div>

</div>