Client side ajax cache using localstorage and local storage expiration

Often you get a situation where you are using lots of ajax calls and most of the calls are repeating i.e one url is called many times returning the same result.
That is actually wastage of time + server resources and also it makes webpage a pretty bad experience for a user.
If a page has lot of ajax calls it takes more than 50 sec to load and some time this time count reaches to 200 sec or above.

Solution, The idea is to use the some sort of caching to prevent multiple ajax calls.

How it works? each distinct ajax call is cached on first time call, on second call all the ajax requests are directly fetched from cache rather than sending requests to webserver. There is no default ajax caching available on client side. To implement Ajax cache on client side we get help of localStorage.

What is localStorage? localStorage is actually a technique available in modern browsers to hold data in browser’s own storage on client side, by default localStorage expiration is depended on browser and it have no certain limit. Many browser have 5mb storage space for localStorage that is good enough to hold cache information.

Here is basic intro of localStorage.

To put an element into storage we call following function

localStorage.setItem("myelement1", "123");

To reterive back the element from cache we use

var item = localStorage.getItem("myelement1");

We can store objects as well like

var object = {id: 123, timestamp: new Date().getTime()}
localStorage.setItem("cacheObject1", JSON.stringify(object));

and similarly to retrieve cacheObject1

var object =JSON.parse(localStorage.getItem("cacheObject1"));

Ajax Cache and Cache/local Storage Expiration:

Note: We have added current timestamp with the cache object, this will be used to set expiry of that cache object.

In case of caching ajax requests we cache urls like

var object = {url: 'http://example.com/myajax/get-products', response : 'sample response', timestamp: new Date().getTime()}
localStorage.setItem("myajax-getproducts", JSON.stringify(object));

Now before making an ajax call we check either that url exists in cache, if exists then get response from cache otherwise send ajax call

var object = JSON.parse(localStorage.getItem("myajax-getproducts"));
if (object) {
    return object.response;
} else {
    $.ajax(..., success: function(ajaxResponse) {
        var object = {url: 'http://example.com/myajax/get-products', response : ajaxResponse, timestamp: new Date().getTime()}
        localStorage.setItem("myajax-getproducts", JSON.stringify(object));
    });
}

Checking Expiration

localStorage itself doesn’t provide expiration mechanism, so we have to apply our own, we are gonna use the timestamp we added earlier with our objects to check the expiration.

Lets say we have 30 minutes expiration.

var object = JSON.parse(localStorage.getItem("myajax-getproducts"));
if (object) {

    var dateString = object.timestamp,
    now = new Date().getTime().toString();

    if ((dateString * 1000 * 60 * 30) >= now ) {
        //time out, send an ajax call
        return false;
    }

    return object.response;
}