How to retrieve the local storage value after refresh the page in Angular?

Question

I put the input values into web local storage.

But my need is, to access the local storage value into the ng-model.

After click the submit button, local storage values to be append in table row.

I tried but it doesnot happen.

Please refer the below code.

  

var helloApp = angular.module("helloApp", ["ngStorage"]);
helloApp.controller("CompanyCtrl", function($scope, $localStorage) {

  $scope.companies = [{
    'name': 'Xerago Technologies',
    'employees': 125000,
    'headoffice': 'Bangalore'
  }, {
    'name': 'Cognizant Technologies',
    'employees': 100000,
    'headoffice': 'Bangalore'
  }, {
    'name': 'Wipro',
    'employees': 115000,
    'headoffice': 'Bangalore'
  }, {
    'name': 'Tata Consultancy Services (TCS)',
    'employees': 150000,
    'headoffice': 'Bangalore'
  }, {
    'name': 'HCL Technologies',
    'employees': 90000,
    'headoffice': 'Noida'
  }, ];
  $scope.addRow = function() {
    $scope.message = {
      'name': $scope.name,
      'employees': $scope.employees,
      'headoffice': $scope.headoffice
    };
	$scope.companies.push($localStorage.message);
	 
    console.log($localStorage.message);
    
  };
});

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>

<div ng-app="helloApp" ng-controller="CompanyCtrl">
  <table class="table">
    <tr>
      <th>Name
      </th>
      <th>Employees
      </th>
      <th>Head Office
      </th>
    </tr>
    <tr ng-repeat="company in companies">
      <td>{{company.name}}
      </td>
      <td>{{company.employees}}
      </td>
      <td>{{company.headoffice}}
      </td>
    </tr>
  </table>
  <form class="form-horizontal" role="form" ng-submit="addRow()">
    <div class="form-group">
      <label class="col-md-2 control-label">Name</label>
      <div class="col-md-4">
        <input type="text" class="form-control" name="name" ng-model="name" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Employees</label>
      <div class="col-md-4">
        <input type="text" class="form-control" name="employees" ng-model="employees" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Headoffice</label>
      <div class="col-md-4">
        <input type="text" class="form-control" name="headoffice" ng-model="headoffice" />
      </div>
    </div>
    <div class="form-group">
      <div style="padding-left:110px">
        <input type="submit" value="Submit" class="btn btn-primary" />
      </div>
    </div>
  </form>
</div>

Now i can able to push the input values in table and also available in local storage..

But when i refresh the page, the last updated data hides. I think i need to know how to get.

Please help on this.

Answer 1

Try this : as local storage will not work here, so you need to check from demo link at out side : So try this link : DEMO

  var helloApp = angular.module("helloApp", []);
  helloApp.controller("CompanyCtrl", function($scope, $window) {
    $scope.companies = JSON.parse($window.localStorage.getItem('compnyData'));
    console.log($scope.companies);

    $scope.addRow = function() {
      $scope.message = {
        'name': $scope.name,
        'employees': $scope.employees,
        'headoffice': $scope.headoffice
      };
      $scope.name = '';
      $scope.employees = '';
      $scope.headoffice = '';

      var tempCompanies = [];
      var tempData = JSON.parse($window.localStorage.getItem('compnyData'));
      console.log(tempData);
      if (tempData != null) {
        console.log('not null');
        tempData.push($scope.message);
        $window.localStorage.setItem('compnyData', JSON.stringify(tempData));
        $scope.companies = tempData;
      } else {
        $window.localStorage.setItem('compnyData', JSON.stringify([$scope.message]));
        $scope.companies = [$scope.message];
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="helloApp" ng-controller="CompanyCtrl">
  <table class="table">
    <tr>
      <th>Name
      </th>
      <th>Employees
      </th>
      <th>Head Office
      </th>
    </tr>
    <tr ng-repeat="company in companies">
      <td>{{company.name}}
      </td>
      <td>{{company.employees}}
      </td>
      <td>{{company.headoffice}}
      </td>
    </tr>
  </table>

  <div class="form-group">
    <label class="col-md-2 control-label">Name</label>
    <div class="col-md-4">
      <input type="text" class="form-control" name="name" ng-model="name" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Employees</label>
    <div class="col-md-4">
      <input type="text" class="form-control" name="employees" ng-model="employees" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Headoffice</label>
    <div class="col-md-4">
      <input type="text" class="form-control" name="headoffice" ng-model="headoffice" />
    </div>
  </div>
  <div class="form-group">
    <div style="padding-left:110px">
      <input type="button" ng-click="addRow()" value="Submit" class="btn btn-primary" />
    </div>
  </div>

</div>

Answer 2

you need to use set and get properties for localstorage to save and retrive your data.

assign your new data to message

 $scope.message = {'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice};

to set the data in localstorage.....

localStorage.setItem("newData",$scope.message);

to get the data on click.....

localStorage.getItem("newData");