AngularJS，工厂，提供者或服务

Question

我正在尝试在包含用户名的应用程序中保存一个变量，我有一个登录页面（ 指令 ），可以在其中获取用户名。 我试过了：

Provider ：它保存了我的变量，但是我只能在应用加载之前进行更改，而我需要在控制器内部进行更改。

.provider('username',function(){

    var username = 'Default';

    return {
        setName: function(value) { 
            username = value; 
        },
        $get: function() { 
            return { 
                 name: username 
            } 
        }
    }

服务：可以，但是如果刷新页面，则会丢失该变量。

.service('username', function () {

    var username;
    this.setName = function (value) {
        username = value;
    }
    this.name = function () {
        return username;
    }
})

有人可以告诉我什么是最好的方法吗？ 我正在努力几个小时想出一些办法。

Answer 1

您应该提供出厂服务，该服务使用浏览器的本地存储/会话存储来存储会话数据

尝试解决这些问题

通过Angular.js维护会话

AngularJS：服务vs提供程序vs工厂

Answer 2

我通常使用factory ，看起来很完美，但是就像您说的那样，刷新页面时会丢失所有数据。

这个行为与Angular of Factory对象无关，而与Javascript和您的浏览器有关 。 您需要将此值保存在存储对象中（Cookie，sessionStorage，localStorage，如果您从未使用过它们，则为链接： 会话存储，本地存储和AngularJS中的Cookies之间的区别 ）。

在这种情况下，您可以在this.setName存储在sessionStorage ，而在初始化工厂时，只需检查该值是否存在即可。

.service('username', function ($window) {
    var username = $window.sessionStorage.getItem('user');
    this.setName = function (value) {
        username = value;
        $window.sessionStorage.setItem('user', value);
    }
    this.name = function () {
        return username;
    }
})

（此代码可能并不完美，例如，如果值不存在，则最好有专门的场景，但可以使您对如何使用此情况有个好主意）