код проэкта
<!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>
Как мне подключить и настроить
LOCAL STORAGE чтобы после обновления страницы оставались все значения добавленные в таблицу?
Имеется массив объектов var tasks, когда выполняется имя проекта, название, расчитывается время выполнения это все добавляется в Объект $scope.currentTask , а он в свою очередь в массив $scope.tasks, как мне сделать так чтобы эти значения оставались на странице в независимости от обновления страницы или закрытия браузера?
