Caching All You Can Cache!

Caching is one of the things you can do to improve your application performance. In JavaScript programming, we have sessionStorage and localStorage API to do the caching. sessionStorage is the browser’s storage that will keep for that session only. So when you close the tab, it will disappear. Meanwhile localStorage more persistence.

When you caching something, you will get benefit from it because you don’t need to retrieve again some data. But also if you don’t use it in a good manner, it will leverage bugs on your system. For instance, you cache User data, but at the same time, someone changed your User data. For this case of course when you open your apps, it will display the wrong output because we still get data from the cache instead of retrieving it from the database.

That is why usually I prefer to use sessionStorage because of its nature. I don’t need to have a procedure to clear the cache because the user will do it automatically when they close the browser. But of course, when that user needs the data, it will retrieve again which is not so good compare to localStorage.

One thing you must consider before you cache something, you need to know what type of data you can cache. It is very important to know before doing it. If your data always change all the time. Then you don’t need to cache it.

This is API for the cache using sessionStorage (you can change it into localStorage if you want to):

	function getOrSetCache (key, functionObject) {
	var item = sessionStorage.getItem(key);
	if (item) {
	var objItem = JSON.parse(item);
	return objItem;
	}
	var result = functionObject();
	var stringifyResult = JSON.stringify(result);
	sessionStorage.setItem(key, stringifyResult);
	return result;
	}

view raw getOrSetCache hosted with ❤ by GitHub

How to use it:

	function getIdentityById (identityId) {
	var key = 'identity' + identityId;
	var fnSearch = function () {
	var fetchXml = '<?xml version="1.0"?>' +
	'<fetch distinct="false" mapping="logical" output-format="xml-platform" version="1.0">' +
	'<entity name="new_identity">' +
	'<attribute name="new_identityid"/>' +
	'<attribute name="new_name"/>' +
	'<attribute name="new_profile" />' +
	'<attribute name="new_membership" />' +
	'<filter type="and">' +
	'<condition attribute="new_identityid" operator="eq" value="' + identityId + '" />' +
	'</filter>' +
	'</entity>' +
	'</fetch>';
	new_XrmSvcToolkit.fetch({
	fetchXml: fetchXml,
	async: false,
	successCallback: function (retrieved) {
	cache[key] = retrieved.entities.length > 0 ? retrieved.entities[0] : null;
	},
	errorCallback: function (error) {
	throw error;
	}
	});
	};
	return function () {
	return getOrSetCache(key, fnSearch);
	}();
	}

view raw how-to-use-getOrSetCache hosted with ❤ by GitHub