当浏览器刷新本地存储刷新时

When browser refresh localStorage flushes

本文关键字：刷新 存储 浏览器      更新时间：2023-09-26

我现在正在修补这段代码，我想利用 localStorage 将我的小部件的状态保存在我的仪表板上，以便当用户返回我的应用程序时，小部件的位置完好无损并保存，但每次我刷新浏览器时，它都会回到其当前的 scope.dashboards 状态，我不知道我将如何修复。 我使用ngStorage模块进行本地存储

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;

我有一个按钮，用户单击该按钮来调用此函数：

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

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

然后当网格加载时，我这样做：

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();
}
相关文章：