How To Save Tasks in a ToDo List to localStorage


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:


<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/" 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>


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

          <!-- 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 class="firstInp">
                <label class="item item-input">
                  <input class="firstInp" id="input1" name="myform" ng-model="mininputVal" type="tel" placeholder="Min.">
              <div class="secondInp">
                <label class="item item-input">
                    <input class="secondInp" id="input2" name="myform" ng-model="secinputVal" type="tel" placeholder="Sec.">
              <div class="countButton1">
                <button id="countDownbutton" ng-disabled="countDown > 0 || !secinputVal" class="button button-balanced" ng-click="timerCountdown(mininputVal, secinputVal)">Start Countdown</button>
              <div class="countButton2">
                <button id="countDownbutton" ng-disabled="!countDown" class="button button-assertive" ng-click="stopCount()">Stop Countdown</button>
        <!-- 3rd Site -->
        <script id="templates/home.html" type="text/ng-template">
        <ion-view view-title="home">
                <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 />
                Contact me: <br />
                via Twitter - @JulianTheDev <br />
                via Email - <br />
                <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>
        <!-- 4th Site -->
        <script id="templates/help.html" type="text/ng-template">
        <ion-view view-title="help">
                <div class="todohelp">
                <h3>To Do</h3>
                <h4>• Double Tap to delete a Task!</h4>
                <h4>• Hold on the Task to edit it!</h4>



`// 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) {
.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’



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() {
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) {
$ = { response: task.title };
title: “Edit Task”,
scope: $scope
}).then(function(res) { // promise
if (res !== undefined) task.title = $;
if (localStorage.getItem(“task”) == null)
$scope.todoList = [ {todoText:‘Create app’, done:false} ];
localStorage.setItem(“task”, angular.toJson($scope.tasks));

//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
    if ($scope.seconds === -1){
        $scope.seconds = 59;
    // Stop The Countdown
    $scope.stopCount = function () {
            //Set the Timer stop message.
            console.log("Timer Stopped.")
            //Cancel the Timer.
            if (angular.isDefined(stop)) {
                $scope.countDown = 0;
    // if zero, stop $interval and show the popup
    if ($scope.countDown === 0){
      $scope.running = false;
      var alertPopup = $ionicPopup.alert({
         title: 'The Countdown is Finished!',
         template: 'Youre Ready To Go!'});
  },1000,0); // invoke every 1 second

});$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)

  // 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.
if(window.StatusBar) {


Ionic update failing

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


I use this one in my projects

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

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