从html访问$ window.sessionStorage

Question

In my case I am working with angularjs and I want to access a saved value in user to show or not some html tags.

First it save in some controller the user variable, it is a part of log in action.

$window.sessionStorage.setItem('user', AuthenticationService.getUser());

Then, I want to show some html tags depending on the role of that user, with something like the following:

<li><a id="id" ng-if="user.role=='admin'" href> console </a></li>

I had something similar to this using $rootScope , but when I refresh the page I lose the value. That is why I need to use window.sessionStorage

Is there any way to access in html a saved value in sessionStorage? or this is wrong and I need another approach?

Answer 1

You can do it via a service/factory

angular.module('myApp').factory("PrincipalService", [
    "$window",
    function($window){

        var user;

        return {
            getUser : getUser,
            setUser: setUser
        };

        function getUser(){
            return user || angular.fromJson($window.sessionStorage.getItem('user'));
        }

        function setUser(userInfo){
            user = userInfo;
            $window.sessionStorage.setItem('user', angular.toJson(userInfo));
        }

    }
]);

edit

The way I could use it to share through every views via rootScope :

angular.module("myApp").run(["$rootScope", "PrincipalService",
    function($rootScope, PrincipalService){
        $rootScope.getUser = PrincipalService.getUser;
        $rootScope.setUser = PrincipalService.setUser;
    }
]);

And then, in your views you can call :

<span>{{$root.getUser()}}</span>

Answer 2

$window is just a wrapper around window, so this approach will work, but it's more preferable to use some other means, such as cookies than to pollute $window.

You should use a controller function or even better, a global user service to access the user.

There's a pretty detailed article on how to do this here: http://www.nesterovsky-bros.com/weblog/2015/01/26/windowsessionStorageInAngularJS.aspx

If you have multiple user properties, use toJson and fromJson to store the object in session storage such as:

var user = { name:'mike', role: 'admin'}
$window.sessionStorage.setItem('user',angular.toJson(user));

and:

var user = angular.fromJson($window.sessionStorage.getItem('user'))

If you need to access the user from a number of different places, a service like @Deblaton recommended is the way to go, but assuming you have multiple properties on your user, add the angular.toJson and angular.fromJson lines like I have above.

The way you are accessing the user in your html requires that it's present on the current scope so if you use the service approach in your controller you would add:

$scope.user = UserService.getUser();