How to save tasks in To Do App on Angular in localStorage so that when the page is reopened, they are not recreated?

T

tzak2015-05-15 02:47:50

Angular

tzak, 2015-05-15 02:47:50

There is such a simple application. It is necessary that when the page is closed, the cases are preserved. As I understand it, it is necessary to organize this through localStorage.

<!DOCTYPE html>
<html lang="en" ng-app="todoList">
<head >
  <meta charset="UTF-8">
  <title>Task1</title>
  <script src="../Libraries/angular.js"></script>
    <link href="../Libraries/bootstrap.css" rel="stylesheet" />
    <link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
    <script>

    	var todoList = angular.module("todoList", []);

    	todoList.controller("ToDoListCtrl", function ($scope) {
    		var model = [{
    		name:'Do', 
                description: "More", 
                date: '11.01.2015', 
                complited: true
    		    	}];

            $scope.data = model;

            $scope.addNewDo = function() {
            	$scope.data.push({
                    name: $scope.doName,
                    description: $scope.doDescription,
        		date: $scope.doDate,
        		complited: $scope.doComplite
                });
            }

        });

    </script>
</head>
<body>
  <div class="container" ng-controller="ToDoListCtrl">
    <div class="page-header">
  			<h1>ToDo list</h1>
    </div>

    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Description</th>
          <th>Date</th>
          <th>Complited</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in data">
          <td>{{item.name}}</td>
          <td>{{item.description}}</td>
          <td>{{item.date}}</td>
          <td>{{item.complited}}</td>
        </tr>
      </tbody>
      
    </table>
    

    <form>
      <div class="form-group">
        <label for="exampleName">Name</label>
        <input type="text" class="form-control" id="exampleName" placeholder="Enter name" ng-model="doName">
      </div>
      <div class="form-group">
        <label for="exampleDate">Date</label>
        <input type="date" class="form-control" id="exampleDate" placeholder="Date" ng-model="doDate">
      </div>
      <div class="form-group">
        <label for="Description">Description</label>
        <textarea class="form-control" rows="3" id="Description" ng-model="doDescription"></textarea>
      </div>
     
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="doComplite"> Complited?
        </label>
      </div>
      <button  class="btn btn-default" ng-click="addNewDo()">Add</button>
    </form>
  </div>
  
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

DarthJS, 2015-05-15
@tzak

Initially, you take data from the localstore $scope.data = localStorage.getItem('Data');
$scope.data = $scope.data ? JSON.parse($scope.data) : []; - if localstorage is empty, pull out an empty array
after pushing new tasks, add them to localstorage.
localStorage.setItem('Data', JSON.stringify($scope.data));
Try