CODEWITHSUNDEEP
javascriptasp.netvb.netcachingwebforms
Ross Brasseaux
Ross Brasseaux

Reputation: 4151

Can I cache a segment of HTML with javascript?

My scenario:

I have a page—let's call it items.aspx—that has an HTML table that is generated with a $.get() call to my ASP Web API controller. When a user clicks on one of the items in the HTML table, the user is sent to a page representing that item's details—let's call that one itemDetails.aspx. I predict it will be common to view the itemDetails.aspx page and then decide to cancel and redirect back to the items.aspx page.

The problem:

The problem is that each time the items.aspx page is loaded, the ajax call runs again and it takes a couple seconds to populate the table.

The question:

Is it possible to, when the user clicks the item to go to the itemDetails.aspx page, store/cache the HTML output of the table for a limited time? Since I only want this to happen if the user clicks the item link, I figured javascript would be the best tool.

Upvotes: 1

Views: 95

Answers (1)

joews
joews

Reputation: 30340

You could use a function that returns a jQuery Promise for the HTML, whether it is loaded from a local cache or an AJAX request.

A simple example:

// Refers to cached HTML when available
var cached;

// Returns a promise for the HTML
function getHtml() {
  var defer;
  if(cached) {
    defer = new Deferred();
    defer.resolve(cached);
  } else {
    defer = $.get(/* ... */);
    defer.then(function(response) {
      cached = response;
    })
  }

  return defer.promise();
}

Usage:

getHtml().then(function(html) {
  $container.html(html);
})

A real implementation would probably do something to prevent concurrent $.get calls, and expire the cache when required.

Upvotes: 1

Related Questions