How To Save Tasks in a ToDo List to localStorage


#1

Hello Community,
Im working on an App with a To Do List. And i want to add localStorage so the Todos’ will be saved. I tried it several times but it didnt work. But there was no error in the console and it just didnt save the todo. I read through the whole page of ionic for localStorage, but i couldnt figure it out by myself. Heres my code - It would be awesome if you guys tell me where i have to add the line of code that i have to add :smiley:

index.html

`
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>

Workaholic

  <ion-nav-view></ion-nav-view>
        
        <!-- first page -->
        <script id="templates/todo.html" type="text/ng-template">
            <ion-view view-title="todo">
            <ion-content>
            <ion-list>
            <ion-item ng-repeat="task in tasks" on-hold="edit(task)" on-double-tap="tasks.splice($index, 1)">
             {{task.title}}
            </ion-item>
            </ion-list>
            </ion-content>
            </ion-view>
          </script>

          <!-- second page -->
          <script id="templates/countdown.html" type="text/ng-template">
          <ion-view view-title="Home">
          <ion-content ng-controller="CountCtrl">
          <div class="countdown" ng-show="countDown&gt;0"><span ng-if="minutes &lt; 10">0</span>{{minutes}}:<span ng-if="seconds &lt; 10">0</span>{{seconds}}</div>
          <div class="row">
              <div class="spacer">
                  </div>
              <div class="firstInp">
                <label class="item item-input">
                  <input class="firstInp" id="input1" name="myform" ng-model="mininputVal" type="tel" placeholder="Min.">
                </label>
              </div>
              <div class="secondInp">
                <label class="item item-input">
                    <input class="secondInp" id="input2" name="myform" ng-model="secinputVal" type="tel" placeholder="Sec.">
                </label>
              </div>
              </div>
              <div class="countButton1">
                <button id="countDownbutton" ng-disabled="countDown > 0 || !secinputVal" class="button button-balanced" ng-click="timerCountdown(mininputVal, secinputVal)">Start Countdown</button>
                </div>
              <div class="countButton2">
                <button id="countDownbutton" ng-disabled="!countDown" class="button button-assertive" ng-click="stopCount()">Stop Countdown</button>
              </div>
        </ion-content>
        </ion-view>
        </script>
        
        <!-- 3rd Site -->
        <script id="templates/home.html" type="text/ng-template">
        <ion-view view-title="home">
            <ion-content>
                <h4>Hello User! Thank you for testing my App. <br />
                Its not Finished at all, so if you have <br />
                improvements or Ideas, just tell me them. <br />
                <br />
                </h4>
                <h4>
                Contact me: <br />
                via Twitter - @JulianTheDev <br />
                via Email - julianbe00@gmail.com <br />
                </h4>
                
                <a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/todo">To Do's</a>
                <a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/countdown">Countdown</a>
                <a class="button button-block icon-right ion-chevron-right button-assertive button-custom" href="#/help">Help</a>
            </ion-content>
          </ion-view>
          </script>
          
        <!-- 4th Site -->
        <script id="templates/help.html" type="text/ng-template">
        <ion-view view-title="help">
            <ion-content>
                <div class="todohelp">
                <h3>To Do</h3>
                <h4>• Double Tap to delete a Task!</h4>
                <h4>• Hold on the Task to edit it!</h4>
                </div>
            </ion-content>
        </ion-view>
        </script>

`

app.js

`// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires’
var app = angular.module(‘starter’, [‘ionic’])

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘home’, {
url: ‘/home’,
templateUrl: ‘templates/home.html’
})
.state(‘help’, {
url: ‘/help’,
templateUrl: ‘templates/help.html’
})
.state(‘countdown’, {
url: ‘/countdown’,
templateUrl: ‘templates/countdown.html’
})
.state(‘todo’, {
url: ‘/todo’,
templateUrl: ‘templates/todo.html’
});

$urlRouterProvider.otherwise(“home”);

});

app.controller(‘TodoCtrl’, function($scope, $ionicPopup, $ionicListDelegate) {

// Tasks are stored here
$scope.tasks =
  [
    {title: "Double Tap To Delete a Task!"},
    {title: "Hold On The Task to Edit It!"},
  ];

// Adds A New Task
$scope.newTask = function() {
$ionicPopup.prompt({
title: “New Task”,
template: “Enter task:”,
inputPlaceholder: “What do you need to do?”,
okText: ‘Create task’
}).then(function(res) { // promise
if (res) $scope.tasks.push({title: res, completed: false});
})
};

// Edits a Task
$scope.edit = function(task) {
$scope.data = { response: task.title };
$ionicPopup.prompt({
title: “Edit Task”,
scope: $scope
}).then(function(res) { // promise
if (res !== undefined) task.title = $scope.data.response;
$ionicListDelegate.closeOptionButtons();
})
};
if (localStorage.getItem(“task”) == null)
{
$scope.todoList = [ {todoText:‘Create app’, done:false} ];
localStorage.setItem(“task”, angular.toJson($scope.tasks));

}else
{
//set the todolist from local storage
$scope.todoList = angular.fromJson(localStorage.getItem(“task”));
}
})

// Countdown Controller
app.controller(‘CountCtrl’, function countController($scope, $interval, $ionicPopup){
$scope.countDown = 0; // number of seconds remaining
var stop;
$scope.mininputVal = “”;
$scope.secinputVal = “”;
$scope.minutes = $scope.mininputVal*60;
$scope.seconds = $scope.secinputVal;

// Countdown
$scope.timerCountdown = function(minutes, seconds) {
    $scope.buttonclick = document.getElementById('countDownbutton')
    $scope.minutes = parseInt(minutes);
    $scope.seconds = parseInt(seconds);

    // Minutes/Seconds Flow + if above the limit
    if ($scope.mininputVal > 99){
        $scope.minutes = 99
    }
    if ($scope.secinputVal > 60){
        $scope.seconds = 60
    }
    if (!$scope.mininputVal){
    $scope.minutes = 0;
    }
    if (!$scope.secinputVal){
    $scope.seconds = 0;
    }
  // set number of seconds until the countdown is ready
  $scope.countDown =  parseInt($scope.mininputVal*60) + parseInt($scope.secinputVal);
  
  // start the countdown
  stop = $interval(function() {
      
    // decrement remaining seconds
    $scope.seconds--;
    $scope.countDown--;
    if ($scope.seconds === -1){
        $scope.seconds = 59;
        $scope.minutes--;
    }
    
    // Stop The Countdown
    $scope.stopCount = function () {
            //Set the Timer stop message.
            console.log("Timer Stopped.")
            //Cancel the Timer.
            if (angular.isDefined(stop)) {
                $interval.cancel(stop);
                $scope.countDown = 0;
            }
        };
        
    // if zero, stop $interval and show the popup
    if ($scope.countDown === 0){
      $interval.cancel(stop);
      $scope.running = false;
      console.log("Finished");
      var alertPopup = $ionicPopup.alert({
         title: 'The Countdown is Finished!',
         template: 'Youre Ready To Go!'});
    }
  },1000,0); // invoke every 1 second
};

});

app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

});
})`


Ionic update failing
#3

Have you tried just a simple test to put something in localstorage and retrieve?


#4

I use this one in my projects


#5
localStorageService.set("my_key", "my value"); 

var myValue    = localStorageService.get("my_key");