local-storage not displaying values after page reloads

Question

I am making timer application using angularjs, counter starts after clicking on timelist, new time in timelist can be added by clicking Add Timer (popup opens then pick time using time picker). Picked time is added into list as well as localstorage onclick of OK button. But when page reloads newly added time in timelist is not getting displayed but it resides in localStorage variable (i.e. timeListDetails). I want it to be displayed whenever I add new timer.

Code to get and set localstorage value:

$scope.getStoredTimeList = function(){
            timeList = JSON.parse(localStorage.getItem("timeListDetails")) || [];
            if(timeList != null){
              timeList.push({"hour":hour,
                                    "minutes":minutes,
                                    "seconds":seconds,
                                    "convertedSec":convertedSec,
                                    "timeFlag": true});
            }
            $scope.timeList = $scope.timeList.concat(timeList).unique();

            localStorage.setItem("timeListDetails", JSON.stringify(timeList));
          }

I have made plunker of my complete example. Clock Application review

Please tell me the solution.

Answer 1

This is because you are not calling the getStoredTimeList method when the page reloads or when initializing the app. The method:

getStoredTimeList()

is being executed only on sibmit()

You should first restore the values from localStorage on app initialization.

Answer 2

When ever reload the page $scope.timeList values Iterate in ng-repeat what you gave in controller.

My idea is just compare localStorage.getItem("timeListDetails") and $scope.timeList, If differ you can take localstorage and assign to $scope.timeList, Otherwise let it be the values.

simple example..

$scope.timeList = [
                  {"hour":0, "minutes":1, "seconds": 6},
                  {"hour":0, "minutes":3, "seconds": 180},
                  {"hour":0, "minutes":5, "seconds": 300}];
 var temp = JSON.parse(localStorage.getItem("timeListDetails"));
            var checkObj = angular.equals($scope.timeList, temp);
            if(!checkObj){
              angular.copy(temp, $scope.timeList);
            }

Change here also ..First time happening When you are trying to push if any one value is undefined like sec. I think(hours or min or sec) undefined is giving problem.

if(timeList != null){
              timeList.push({"hour":hour || 0,
                                    "minutes":minutes || 0,
                                    "seconds":seconds || 0,
                                    "convertedSec":convertedSec || 0,
                                    "timeFlag": true});
            }

As per your need use some other ways..