2014-12-19 153 views
0

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

是你的网页的本地(如访问在浏览器中的文件),或者在服务器上? – atmd 2014-12-19 09:58:45

+0

也许与此相关:http://stackoverflow.com/questions/3738047/localstorage-doesnt-retrieve-values-after-page-refresh – atmd 2014-12-19 09:59:24

回答

0

我有用户点击调用此功能的按钮:

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