我有一个用户单击以调用此函数的按钮:
//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();
}