title: AngularJS : use local storage
body: <p>I want to save my web data in the local storage. I have a table which I add to it data, it works with AngularJS. I would like the data to be saved, how do I do it ? </p>
  
  <p>the code :
  the html code :</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
  
  &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div ng-controller="AppCtrl" &gt;
      &lt;button type="button" class="btn btn-default" ng-click="openR()"&gt; add user &lt;/button&gt;
      &lt;button type="button" class="btn btn-default" ng-click="openC()"&gt; connect &lt;/button&gt;
      &lt;div class="btn btn-success" ng-show="User.connected"&gt;{{User.username}} is connected&lt;/div&gt;
      &lt;table&gt;
          &lt;thead&gt;
          &lt;th class="col-lg-3"&gt;Username&lt;/th&gt;
          &lt;th class="col-lg-3"&gt;Password&lt;/th&gt;
          &lt;th class="col-lg-3"&gt;First name&lt;/th&gt;
          &lt;th class="col-lg-3"&gt;Last name&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr ng-repeat="User in Users.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))"&gt;
              &lt;td class="col-lg-3"&gt;{{User.userN}}&lt;/td&gt;
              &lt;td class="col-lg-3"&gt;{{User.PassW}}&lt;/td&gt;
              &lt;td class="col-lg-3"&gt;{{User.Name}}&lt;/td&gt;
              &lt;td class="col-lg-3"&gt;{{User.LastName}}&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div&gt;
          &lt;pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" items-per-page="itemsPerPage"&gt;&lt;/pagination&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/ng-template" id="table.html"&gt;
      &lt;form ng-submit="okR()"&gt;
          &lt;div class="modal-header" &gt;
              &lt;h3&gt;users&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Username :&lt;/label&gt;
                      &lt;input type="text" placeholder="Ariel73" ng-model="userN"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Password :&lt;/label&gt;
                      &lt;input type="text" placeholder="Aa123456" ng-model="PassW"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;First name :&lt;/label&gt;
                      &lt;input type="text" placeholder="Ariel" ng-model="Name"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Last name :&lt;/label&gt;
                      &lt;input type="text" placeholder="Livshits" ng-model="LastName"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="submit"  class="btn btn-success"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/script&gt;
  &lt;script type="text/ng-template" id="connect.html"&gt;
      &lt;form ng-submit="okC()"&gt;
          &lt;div class="modal-header" &gt;
              &lt;h3&gt;users&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Username :&lt;/label&gt;
                      &lt;input type="text" placeholder="Ariel73" ng-model="username"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Password :&lt;/label&gt;
                      &lt;input type="text" placeholder="Aa123456" ng-model="password"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="submit"  class="btn btn-success"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>the angular app code : </p>
  
  <pre><code>app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
  app.controller('AppCtrl', function($scope, $modal, $log ) {
      $scope.Users = [{
          'userN': 'Ariel1',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }, {
          'userN': 'Ariel2',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }, {
          'userN': 'Ariel3',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }, {
          'userN': 'Ariel4',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }, {
          'userN': 'Ariel5',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }, {
          'userN': 'Ariel6',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }, {
          'userN': 'Ariel6',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }, {
          'userN': 'Ariel6',
          'PassW': 'Aa123456',
          'Name': 'Ariel',
          'LastName': 'Livshits'
      }];
  
      $scope.User = {
          'username': '',
          'Password': '',
          'connected': false
      };
      $scope.viewby = 3;
      $scope.totalItems = $scope.Users.length;
      $scope.currentPage = 4;
      $scope.itemsPerPage = $scope.viewby;
      $scope.maxSize = (($scope.Users.length / 3) + 1) ; //Number of pager buttons to show
  
      $scope.setPage = function (pageNo) {
          $scope.currentPage = pageNo;
      };
  
      $scope.pageChanged = function() {
          console.log('Page changed to: ' + $scope.currentPage);
      };
  
      $scope.setItemsPerPage = function(num) {
          $scope.itemsPerPage = num;
          $scope.currentPage = 1; //reset to first paghe
      };
  
  
      $scope.openR = function() {
  
          var modalInstance = $modal.open({
              templateUrl: 'table.html',
              controller: 'ModalInstanceCtrl'
          });
          modalInstance.result.then(function(newUser) {
              $scope.Users.push(newUser);
          }, function() {
              $log.info('Modal dismissed at: ' + new Date());
          });
      };
      $scope.openC = function() {
  
          var modalInstance = $modal.open({
              templateUrl: 'connect.html',
              controller: 'ModalInstanceCtrl'
          });
          modalInstance.result.then(function(conUser) {
              $scope.User = conUser;
          }, function() {
              $log.info('Modal dismissed at: ' + new Date());
          });
      };
  });
  
  // Please note that $modalInstance represents a modal window (instance) dependency.
  // It is not the same as the $modal service used above.
  
  app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {
      $scope.okR = function() {
          $modalInstance.close({
              'userN': $scope.userN,
              'PassW': $scope.PassW,
              'Name': $scope.Name,
              'LastName': $scope.LastName
          });
      };
  
      $scope.okC = function() {
          $modalInstance.close({
              'username': $scope.username,
              'Password': $scope.password,
              'connected': true
          });
      };
  
      $scope.cancel = function() {
          $modalInstance.dismiss('cancel');
      };
  });
  </code></pre>