Response Caching
Cache AJAX responses on DOM elements to avoid redundant network requests when the same data is needed again.
jQuery
Intermediate
4 min read
Caching API Responses with .data()
Example
$(".tab").on("click", function() {
const type = $(this).data("type");
const cached = $(this).data("response");
if (cached) {
render(cached);
return;
}
$.getJSON("/api/items/" + type, function(data) {
$(this).data("response", data); // cache it
render(data);
}.bind(this));
}); Pro Tip
Simple element-level caching works well for tab panels and accordion sections.