Как сохранить данные в local storage в angular js?

419

11 октября 2017, 09:36

Есть форма где мы можем ввести данные. Эти данные после отправки добавляются в таблицу. Как сделать, чтобы данные которые мы ввели форму сохранялись в local storage ? То есть нужно, чтобы после перезагрузки те данные, что мы добавили через форму остались в таблице. Как это реализовать?

Plunker

var helloApp = angular.module("helloApp", []); 
helloApp.controller("CompanyCtrl", function($scope) { 
    $scope.companies = [{ 
            'name': 'Infosys 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.companies.push({ 'name': $scope.name, 'employees': $scope.employees, 'headoffice': $scope.headoffice }); 
        $scope.name = ''; 
        $scope.employees = ''; 
        $scope.headoffice = ''; 
    }; 
})

<!DOCTYPE html> 
<html ng-app="helloApp"> 
 
  <head> 
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> 
    <script src="script.js"></script> 
  </head> 
 
<body 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> 
</body> 
 
</html>

Answer 1

В ангуляре с localStorage можно работать как обычно.

Но для удобства можно использовать ngStorate.

Пример на plunker.

К сожалению, сниппет не работает. Но код в нем 100% рабочий.

var helloApp = angular.module("helloApp", ['ngStorage']); 
helloApp.controller("CompanyCtrl", function($scope, $localStorage) { 
  $localStorage.$default({ 
    companies: [] // устанавливаем значение по умолчанию. Если в localStorage нету companies, он создаться пустым массивом 
  }); 
  $scope.companies = $localStorage.companies; // присваиваем к $scope наш массив. Он или пустой или с данными. 
  $scope.addRow = function() { 
    $scope.companies.push({ 
      'name': $scope.name, 
      'employees': $scope.employees, 
      'headoffice': $scope.headoffice 
    }); // когда обновляется содержмиое массива, будет перезаписываться значение в localStorage 
    $scope.name = ''; 
    $scope.employees = ''; 
    $scope.headoffice = ''; 
 
  }; 
})

<!DOCTYPE html> 
<html ng-app="helloApp"> 
 
<head> 
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script> 
  <script src="script.js"></script> 
</head> 
 
<body 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> 
</body> 
 
</html>