Fetching User Profile Properties and making use of the Local Storage

Fetching user profile information for a given user can be both slow performance wise and technically arduous (due to there not being a way to filter specific custom user profile properties for a given user).

So we will look at how we can fetch this user profile information elegantly and and save it locally.

In this article I will walk through how to fetch user profile properties using REST and then store them in a usable locally cached form.


Getting User Profile information

First of all, we need to establish which properties we want to store and the structure of the JavaScript object that will hold them.

For this example I will construct a simple JSON object called ‘Current‘ which lives in the MyCompany.UserProfiles namespace and store the user profile property values in there.

Excellent, but we want to actually fetch these properties back from the REST endpoint and save them in this object and as it turns out that’s pretty straight forward as well.

First we declare a constants JSON object which will hold the REST endpoint and the local storage cache key (we need this to save the properties to the web browser’s local storage cache).

Wait a minute… What is this GetLocalStorageItemCacheForKey function? Well this is where we check to see if we already have this specific set of data in the user’s web browser local storage cache and then return either the cached results or the endpoint data.

We will take a look at this in detail in just one minute, but the important thing to note right now is that this function returns our user profile properties and we are looping through a collection of properties that we want to map (which matches the javascript object we created earlier) and using this returned array of data, populating the Current JSON object.

So how do we actual check Local Storage and fetch the profile properties?

Ok a minute is up, so lets look at this local storage function. First of all, in this function we check the web browsers local storage cache to see if the user profile property data exists and if it is still valid. If the data is there, we serve that straight back to the ‘GetCurrent’ function by resolving the JavaScript promise with the user profile data.

If the data is not there, or it’s out of date, we go off and fetch it and then store it in the cache. Again, we resolve this newly retrieved data to the ‘GetCurrent‘ function by resolving the JavaScript promise in the same way.

The full code for working with the Local Storage in this way is as follows:

So now that we have the user profile property collection, we need to actually find the property values that we need from a pretty ambiguous array of JavaScript JSON objects (returned by the endpoint).

We do this with the help of a function which iterates through the user profile collection until the relevant property is found.

So now we have everything that we need to get a specific selection of user profile properties efficiently – storing them in the relevant user’s web browser local storage cache and fetching them only when needed.

So the full user profile JavaScript is as follows (using the Local Storage functionality we discussed early in this article).


It would be pretty straight forward to adapt this code to save the formatted JSON object to the web browser local storage cache instead of the raw endpoint data.

You could also, extend the ‘Current’ JSON object to hold the mappings that you need – this would allow you to iterate through this single object instead of creating a temporary array (as shown in the GetCurrent function).

With these things in mind, hopefully you can see how easy it is to get this information and store it for efficiency and ease of use going forward.



Fetching User Profile Properties and making use of the Local Storage

Leave a Reply

%d bloggers like this: