How to make data in Angular service persist through page refresh

Question

I have an Angular service that looks like:

var lunchrServices = angular.module('lunchrServices', []);

lunchrServices.service('authService', function () {
    var user = null;

    this.login = function (userEmail) {
        user = userEmail;
    };
    this.logout = function () {
        user = null;
    };
    this.currentUser = function(){
        return user;
    }

});

I use this service on a controller on the main page of my application like so:

var lunchrControllers = angular.module('lunchrControllers', []);

lunchrControllers.controller('MainPageController', ['$scope', '$http', '$state', 'authService',
    function ($scope, $http, $state, authService) {    
        $scope.logIn = function () {    
            $http.post('/api/users/authenticate', {email: $scope.email, password: $scope.password}).
                success(function (data, status, headers, config) {

                    // lines of interest
                    authService.login($scope.email);
                    $state.go('users');
                }).
                error(function (data, status, headers, config) {
                    $scope.errorMessages = data;
                    $scope.password = "";
                })
        }
    }]);

With the users state displaying the following (I'm using ui-router to plug this in a ui-view):

div(class='container')
    h1 Welcome {{user}}

    // other stuff

The controller for this page looks like:

lunchrControllers.controller('UserController', ['$scope', '$http', '$state', 'authService',
    function ($scope, $http, $state, authService) {
        $scope.user = authService.currentUser();

        //other stuff
    }]);

When the user taken to this page through the $state.go('users') call, {{user}} is correctly populated.

The problem, however, is that refreshing the page now results in {{user}} being empty. How can I have the data stored in the service persist through page refreshes?

Answer 1

You can set a cookie or use localStorage. There is a $cookies service in angular.

For a localstorage solution you will have to google around.

shove the user object into a cookie that never expires and then try to read it from there before making your request next time they reload the page.