一尘不染

Angularjs数据存储最佳实践

angularjs

我的角度应用程序有2个控制器。我的问题是,当用户离开页面时,控制器不会保留数据。

如何将所选控制器上的选定数据存储到数据存储中,以便可以在其他控制器之间使用?


阅读 203

收藏
2020-07-04

共1个答案

一尘不染

选项1-自定义 service

您可以利用专用的角度服务在控制器之间存储和共享数据(服务是单实例对象)

服务定义

 app.service('commonService', function ($http) {

        var info;

        return {
            getInfo: getInfo,
            setInfo: setInfo
        };

        // .................

        function getInfo() {
            return info;
        }

        function setInfo(value) {
            info = value;
        }
});

在多个控制器中的用法

app.controller("HomeController", function ($scope, commonService) {

    $scope.setInfo = function(value){
        commonService.setInfo(value);
    };

});


app.controller("MyController", function ($scope, commonService) {

    $scope.info = commonService.getInfo();

});

选项2-HTML5 localStorage

您可以使用内置的浏览器本地存储并从任何地方存储数据

写作

$window.localStorage['my-data'] = 'hello world';

var data = $window.localStorage['my-data']
// ...

选项3-通过Web服务器API

如果需要在不同用户之间保留数据,则应将其保存在服务器端的某个位置(数据库/缓存)

function getProfile() {
    return $http.get(commonService.baseApi + '/api/profile/');
}

function updateProfile(data) {
    var json = angular.toJson(data);
    return $http.post(commonService.baseApi + '/api/profile/', json);
}
2020-07-04