How do I use Local Storage in an Angular app?

D

DimaPolishuk2016-07-31 16:17:08

css

DimaPolishuk, 2016-07-31 16:17:08

project code

<!doctype html>
<html ng-app="timerApp">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="styles/style.css">
</head>

<body ng-controller="timerController">
  <div class="panel">
    <div class="form-inline">
      <div class="form-group">
        <div class="col-md-8">
          <input class="form-control" ng-model="currentTask.name" placeholder="What are you working on?"/>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-2">
          <select class="inputProject" ng-model="currentTask.selectedProject">
   		      <option ng-repeat="item in project" value="{{item.project}}">{{item.project}}</option> 
  		    </select>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-8">
          <form name="clockform">
            <input name="clock" size="12" maxlength="12" ng-model="clock" ng-init="clock='00:00:00'">
          </form>
        </div>
      </div>
      <div class="form-group">
        <div class="col-md-2">
          <button class="btn btn-start" ng-click="startOrStop()" ng-bind="buttonText" ng-style="style"></button>
        </div>
      </div>
      <table class="table table-striped">
        <thead>
          <tr>
            <th> Задача </th>
            <th> Проэкт </th>
            <th> Быстрый старт </th>
            <th> Потраченное время на задачу </th>
            <th> Время работы </th>
            <th> Дата завершения проекта </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in tasks track by $index">
            <td>{{item.name}}</td>
            <td>{{item.selectedProject}}</td>
            <td><button class="btn-quickStart" ng-click="quickStart(item)"></button></td>
            <td>{{dateDifference(item.dateBegin, item.dateFinish)}}</td>
            <td>{{item.dateBegin.toLocaleTimeString()}} - {{item.dateFinish.toLocaleTimeString()}} </td>
            <td>{{item.dateFinish.toLocaleDateString()}}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="js/main.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>

    <script>
      var tasks = [{
        name: "Задача № 1",
        selectedProject: 'select project',
        dateBegin: new Date('07 24, 2016 19:58:49'),
        dateFinish: new Date('07 24, 2016 19:58:59')
      }, {
        name: "Задача № 2",
        selectedProject: 'timer',
        dateBegin: new Date('07 25, 2016 19:58:30'),
        dateFinish: new Date('07 25, 2016 19:59:15')
      }]
      var timerApp = angular.module('timerApp', []);
      timerApp.controller("timerController", function($scope, $timeout) {
        var restartTask = JSON.parse(localStorage.getItem("tasks"));
       console.log(restartTask);
        var clocktimer;
        $scope.timer = function() {
          $scope.clock = $scope.dateDifference($scope.currentTask.dateBegin, new Date());
          clocktimer = $timeout($scope.timer, 1000);
          
          } 
        $scope.buttonText = "Start";
        $scope.startOrStop = function() {
          if ($scope.currentTask.dateBegin==undefined) {
            $scope.start();
          } else{
            $scope.stop();
          }
        };
        $scope.tasks = tasks;
        $scope.project = [{
          project: "select project"
        }, {
          project: "timer"
        }, {
          project: "timer1"
        }, {
          project: "timer2"
        }                
                ];
        $scope.currentTask = {
          name: '',
          selectedProject: 'select project',
          dateFinish: ''
        };
        $scope.start = function() {
          var dateBegin = new Date();
          $scope.currentTask.dateBegin = dateBegin;
           $scope.style = {background: 'red'};
           $scope.buttonText = "Stop";
           $scope.timer();
           localStorage.setItem("tasks", JSON.stringify(tasks));
        }
        $scope.stop = function() {
          var dateFinish = new Date();
          $scope.currentTask.dateFinish = dateFinish;
          $scope.tasks.push($scope.currentTask);
          $timeout.cancel(clocktimer);
          $scope.clock = '00:00:00';
          $scope.tasks.sort(tasksCompare);
          $scope.currentTask = {};
          $scope.style = {background: '#11dc51' }
          $scope.buttonText = "Start";
         localStorage.setItem("tasks", JSON.stringify(tasks)); 
        }
        $scope.dateDifference = function(dateBegin, dateFinish) {
          var dateDifference = ((Math.floor((dateFinish) / 1000)) - (Math.floor((dateBegin) / 1000)));
          var seconds = dateDifference % 60;
          dateDifference -= seconds;
          dateDifference = Math.floor(dateDifference / 60);
          var minutes = dateDifference % 60;
          dateDifference -= minutes;
          dateDifference = Math.floor(dateDifference / 60);
          var hours = dateDifference % 60;
          if (hours < 10) hours = '0' + hours;
          if (minutes < 10) minutes = '0' + minutes;
          if (seconds < 10) seconds = '0' + seconds;
          dateDifference = hours + ":" + minutes + ":" + seconds;
          return dateDifference;
        }
        $scope.quickStart=function(tasks){
          if ($scope.currentTask.dateBegin!==undefined) {
            $scope.stop();
          }
            $scope.start();
            $scope.currentTask.name=tasks.name;
            $scope.currentTask.selectedProject=tasks.selectedProject;
        }
        function tasksCompare(a, b) {
          var r = 0;
          if (a.dateFinish > b.dateFinish) {
            r = -1;
          }
          if (a.dateFinish < b.dateFinish) {
            r = 1;
          }
          return r;
        }
    
      });
    </script>
</body>

</html>

How can I connect and configure LOCAL STORAGE so that after refreshing the page, all the values added to the table remain?
There is an array of var tasks objects, when the project name is executed, the name is executed, the execution time is calculated, all this is added to the $scope.currentTask Object, and it, in turn, to the $scope.tasks array, how can I make these values remain on the page regardless from refreshing the page or closing the browser?

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

T

ThunderCat, 2016-03-18
@Bazhenovdev

perhaps some of this
is more accurate, even here
For the future , bookmark

W

Web Developer Blog, 2016-03-18
@Alexey_Suprun

Billabong looks like

O

Oleg, 2016-07-31
@ptrvch

It is possible through ngStorage . Automatically serializes/deserializes objects in local storage

Z

Zelimkhan Beltoev, 2016-07-31
@Beltoev

If it’s very rude and if only it works:
Whenever the array changes, overwrite it in the cache:
And do something like this when loading the page when updating the page:
Well, in general, ideally, this should be moved to a service that would carry out these manipulations . But, judging by the code, you will not bother with this =)