当浏览器刷新 localStorage 刷新时

Question

我现在正在修改此代码，我想利用 localStorage 将我的小部件的状态保存在我的仪表板上，以便当用户返回我的应用程序时，小部件的位置完好无损并保存，但每次我刷新浏览器，它会回到当前的 scope.dashboards 状态，我不知道如何修复。我将 ngStorage 模块用于 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

我有一个按钮，用户点击它来调用这个函数：

//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();
        }); 

};

这会将其保存到本地存储中。我还将它保存到数据库中，以防本地存储过期或被删除。

然后当 gridster 加载时，我会这样做：

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