title: AngularJS To-Do List App - Keep list on page refresh
body: <p>I'm making a simple to-do list application using AngularJS. I'm actually using an ASP.NET MVC template, but so far I've managed to get everything working just by using Angular and Bootstrap.</p>
  
  <p>I'm able to add and remove tasks, and mark them as complete. However, when I refresh the page, it resets the to-do list. I need it to save the list when refreshing the page or navigating to another page on the site. The list should only reset after the user closes their browser.</p>
  
  <p>I've attempted various methods, including $cookies, $sessionStorage and $localStorage, but for some reason I can't get any of them to work. At this stage, should I be relying on the front end for session management, or the back end?</p>
  
  <p>Below is an example of my code when I tried to implement $localStorage. Am I missing something?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html ng-app="todoApp"&gt;
  &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div ng-controller="todoList" class="jumbotron"&gt;
      &lt;h2&gt;&lt;strong&gt;To-Do List&lt;/strong&gt;&lt;/h2&gt;
      &lt;br/&gt;
      &lt;form ng-submit="addTodo()"&gt;
          &lt;input type="text" ng-model="todoText"
                 placeholder="Add new task" size="30"&gt;
          &lt;button type="submit" class="btn btn-primary glyphicon glyphicon-plus"&gt;Add&lt;/button&gt;
      &lt;/form&gt;
      &lt;br/&gt;
      &lt;ul&gt;
          &lt;li ng-repeat="todo in todos"&gt;
              &lt;label class="checkbox"&gt;
                  &lt;input type="checkbox" ng-model="todo.done"&gt;
                  &lt;span class="done-{{todo.done}}"&gt;{{todo.text}}&lt;/span&gt;
                  &lt;span class="glyphicon glyphicon-trash" ng-click="removeTodo()"&gt;&lt;/span&gt;
              &lt;/label&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var app = angular.module('todoApp', []);
     
      app.controller('todoList', function ($scope, $localStorage) {
          
          $scope.getTodos = function() {
              var str = $localStorage.getItem("todos");
              $scope.todos = JSON.parse(str);
              
              if (!todos) {
                  $scope.todos = [{ text: 'Feed the cat', done: true }, { text: 'Mow the lawn', done: false }];
              }
          }
  
          $scope.saveToDos = function() {
              var str = JSON.stringify(todos);
              $localStorage.SetItem("todos", str);
          }     
             
          $scope.addTodo = function () {
              if($scope.todoText !== '') {
                  $scope.todos.push({text:$scope.todoText, done:false});
                  $scope.todoText = '';
                  saveToDos();
              }
          };
  
          $scope.removeToDo = function() {
              todos.splice($index, 1);
              saveToDos();
          }
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>