Can I cache a segment of HTML with javascript?

Question

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.

joews · Accepted Answer · 2015-04-12 20:35:34Z

1

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.

edited Apr 12, 2015 at 20:35

answered Apr 12, 2015 at 20:30

joews

30.4k11 gold badges82 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ross Brasseaux Over a year ago

This is certainly a correct answer, but I think the solution we eventually settled on is to store the JSON data in window.localstorage. It's the loading of the JSON data that is causing the wait time. No need to cache all the HTML.

joews Over a year ago

This function will work unchanged - just call it getJson :)

Collectives™ on Stack Overflow

Can I cache a segment of HTML with javascript?

My scenario:

The problem:

The question:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My scenario:

The problem:

The question:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related