When browser refresh localStorage flushes

Question

I am tinkering this code now and I would like to make use of localStorage to save the state of my widgets on my dashboard so that when the user goes back to my application the position of the widgets are intact and saved but everytime I refresh the browser it goes back to its current scope.dashboards state which I have no idea on how will I fix. I used ngStorage module for localStorage

var modInProgr = false;
    $scope.$watch("dashboards['1'].widgets", function(newVal, oldVal) {
        if (!modInProgr) {
            modInProgr = true;
            // modify dashboards
            $scope.$storage = $localStorage;
            $localStorage.sample = $scope.dashboards[1];
            console.log($localStorage.sample);
        }
        $timeout(function() {
            modInProgr = false;
        }, 0);

        $scope.dashboard = $localStorage.sample;
    }, true);

    // init dashboard

    $scope.dashboard = $localStorage.sample;

Answer 1

I have a button that the user clicks to call this function:

//Used to save the dashboard to BOTH local storage and PENN database
//Local storage will attempt to be loaded first. However, if local storage is not there
//then we will load the dashboard from the database
$scope.serialize = function() {

    $scope.dashboardJSON = angular.toJson($scope.standardItems);

    console.log($scope.dashboardJSON);

    localStorageService.set("DashboardInfo", $scope.dashboardJSON);

    //Send HTTP request 'POST' to saveDashboard function in Rails controller
    $http({
        method: 'POST',
        url: 'saveDashboard',
        data: {'dashboardInfo': $scope.dashboardJSON },
        headers: {'Content-Type': 'application/json' }
        }).success(function(data, status, headers, config)
        {
            //Let user know that their dashboard was saved with this success flash
            $scope.successSavingDashboardToDBAlert();
        }).error(function(data, status, headers, config)
        {
            //Let the user know the dashboard could not be saved with this error flash
            $scope.errorSavingDashboardToDBAlert();
        }); 

};

That saves it to local storage. I also save it to database incase local storage expires or gets deleted.

then when gridster is loading I do this:

var dashboardInfo = localStorageService.get("DashboardInfo");

if (dashboardInfo == null)
{
          //Load from the database
}
else
{
           //console.log("Loading from Local Storage");

              //Parse the local storage JSON data with angular
             var parsedDashboard = angular.fromJson(dashboardInfo);

              //Loop through the parsed data to push it to the array that is used for gridster. 
              //Usually this is called items but in my case I called it standardItems

            for(var i = 0; i < parsedDashboard.length; i++)
            {
                 //console.log(parsedDashboard[i]);
                 $scope.standardItems.push(parsedDashboard[i]);
            }
                     //$scope.successAlert();
}