Javascript 如何在AngularJS中跨页面共享数据

我有两页。一个是

login.html

，第二个是

home.html

。登录成功后，它将重定向到

home.html

。我想访问

home.html

中的用户id
因此，我通过

services.js中的
setCurrentUser（id）
保存了名为“loginForm”（controller for
login.html
）的控制器的id
并尝试通过
getCurrentUser（）
从名为“expenseForm”的控制器（对应于
home.html
的控制器）访问id。但它是以空字符串的形式出现的。请用这个指导我

controller.js-

var expmodule = angular.module('myApp.controllers', []);

expmodule.controller('loginForm', function($scope, sharedProperties) {
    $scope.login = function (userid, password) {
        var users = sharedProperties.getUsersInfo();
        users.forEach(function (usr) {
            if (usr.id === userid && usr.pwd === password) {
                alert("Welcome " + userid);
                sharedProperties.setAuthentication();
                sharedProperties.setCurrentUser(usr.id);
                window.location = "home.html";
            }
        })();
        if(sharedProperties.isAuthenticated() === false) {
            alert("Invalid Login");
        }
    }
});

expmodule.controller('expenseForm', function($scope, sharedProperties) {
    $scope.submitExpense = function (expenseInfo) {
        var id;
        id = sharedProperties.getCurrentUser();
        sharedProperties.setExpenseInfo(id, expenseInfo);
        alert(sharedProperties.getExpenseInfo(id));
    }
});

loginForm.$inject = ['$scope', 'sharedProperties'];
expenseForm.$inject = ['$scope', 'sharedProperties'];

angular.module('myApp.services', [])
.service('sharedProperties', function () {
    var users = [{id: "Neha", pwd: "Neha"}, {id: "Sneha", pwd: "Sneha"}],
    authentication = false,
    expenses = {},
    currentUser = "";
    return {
        getUsersInfo: function () {
            return users;
        },
        setUserInfo: function (usr) {
            users.push(usr);
            expenses[usr.id] = [];
        },
        setAuthentication: function (user)      { authentication = true;      },
        isAuthenticated: function ()            { return authentication;      },
        setCurrentUser: function (id)           { currentUser = id;           },
        getCurrentUser: function ()             { return currentUser;         },
        getExpenseInfo: function (id)           { return expenses[id];        },
        setExpenseInfo: function (id, expense)  { expenses[id].push(expense); }
    }
});

services.js-

var expmodule = angular.module('myApp.controllers', []);

expmodule.controller('loginForm', function($scope, sharedProperties) {
    $scope.login = function (userid, password) {
        var users = sharedProperties.getUsersInfo();
        users.forEach(function (usr) {
            if (usr.id === userid && usr.pwd === password) {
                alert("Welcome " + userid);
                sharedProperties.setAuthentication();
                sharedProperties.setCurrentUser(usr.id);
                window.location = "home.html";
            }
        })();
        if(sharedProperties.isAuthenticated() === false) {
            alert("Invalid Login");
        }
    }
});

expmodule.controller('expenseForm', function($scope, sharedProperties) {
    $scope.submitExpense = function (expenseInfo) {
        var id;
        id = sharedProperties.getCurrentUser();
        sharedProperties.setExpenseInfo(id, expenseInfo);
        alert(sharedProperties.getExpenseInfo(id));
    }
});

loginForm.$inject = ['$scope', 'sharedProperties'];
expenseForm.$inject = ['$scope', 'sharedProperties'];

angular.module('myApp.services', [])
.service('sharedProperties', function () {
    var users = [{id: "Neha", pwd: "Neha"}, {id: "Sneha", pwd: "Sneha"}],
    authentication = false,
    expenses = {},
    currentUser = "";
    return {
        getUsersInfo: function () {
            return users;
        },
        setUserInfo: function (usr) {
            users.push(usr);
            expenses[usr.id] = [];
        },
        setAuthentication: function (user)      { authentication = true;      },
        isAuthenticated: function ()            { return authentication;      },
        setCurrentUser: function (id)           { currentUser = id;           },
        getCurrentUser: function ()             { return currentUser;         },
        getExpenseInfo: function (id)           { return expenses[id];        },
        setExpenseInfo: function (id, expense)  { expenses[id].push(expense); }
    }
});

您不能在angularjs中的不同“页面”之间共享数据。您需要为此使用任何持久性存储。我建议您为此使用会话/cookies

编写一个服务（AuthService），抽象底层存储（会话/cookie/localstorage），并在用户登录后保存用户对象
 只是一个安全注意事项：在JS页面中推送用户ID和密码似乎是一种不好的做法，任何访问您网站的访问者都可以看到。如果您有单独的html页面并将浏览器直接重定向到这些文件，那么您根本没有利用angularjs的单页面应用程序优势。您应该了解angularjs路由是如何工作的：使用参数只使用一个条目文件重定向到不同的内容，而不使用硬浏览器重定向。然后，您可以通过工厂/服务更轻松地共享变量。附带一点信息：Angular和服务已经在会话cookie上提供了一个抽象。