As I posted few days ago, here Cool usability enhancements in SharePoint 2010 using JQuery, there are number of ways you can make user interface of your sites more usable and personal.

The next step to those usability enhancements is saving user preferences, and what better way to do it than using User Profile service; well turns out there might be a better way.

See, User Profile Service application is not as dynamic as [insert you disappointment phrase here].
In this post, we looked at how you can retrieve user profile property values and in this post, how to save custom properties to a user profile.

The problem is that it takes several seconds for the property to be saved and for the new value to be returned to a user. This doesn't seem significant, but if we're looking at saving user preference related to rendering of a web part on each page, as user navigates to the next page, they will think that their preference was not saved, where in fact it's just a delay.
As an alternative or an add-on, you can use good old cookies to save the preference. But then cookies don't save information to the profile, only to a browser. If our user logs in to their iPad or closes the browser, their cookies might be deleted or not be up to date. What you can do is use cookies as an intermediate data store while also using User Profile.
Here is what the sequence will be when you save your UI rendering preference customization:
1. Save the rendering preference to the cookie
2. Save the rendering preference to the user profile
3. Set cookie to expire in say 10 seconds
Here is the sequence for each page load:
1. Check if the cookie exists and not expired, if so load the UI preference according to your logic
2. If the cookie expired load the UI preference from the user profile and save it to the cookie
3. Set cookie to expire in say 10 seconds

Here are some handy snippets to work with your cookies:

function setCookie(name, value, seconds) {
if (seconds) {
var date = new Date();
date.setTime(date.getTime() + (seconds * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

function deleteCookie(name) {
setCookie(name, "", -1);
}
Here is how you'd use above methods in your logic
// Setting a new cookie, expiring in 10 seconds
setCookie("CookieName", "CookieValue", 10);

// Checking the state of the cookie
if (getCookie("CookieName") != null) {
alert('the cookie expired or never set');
}

// Deleting the cookie
deleteCookie("CookieName");
That's it, now combine this with the previous two posts on how to save variables to the user profile and you're fully armed with reliably saving custom UI preferences.
Enjoy and remember, there is plenty where this came from!

This article was originally posted on ShareMuch.

Check out our new resource centre for more insightful work from Yaroslav Pentsarskyy.

Stay tuned for more SharePoint content by joining our community or by following us on twitter or facebook.