Caching JavaScript API Calls

Question

I'm querying the GitHub API from the client using JavaScript (on this page).

There are 14 API calls each time the page loads, which means I will end up hitting GitHub's API rate limit of 5000 calls per hour pretty fast.

Most caching strategies I've seen assume that you have access to a server, but in my case I'm running a purely static Middleman site.

So my question is this: how can I cache API requests from the client? Are there third-party apps that provide this service?

(Note that my use case is many different clients hitting the page (e.g. it has been linked from Hacker News), not a single client refreshing. So local caching wouldn't really help much. )

Answer 1

Agreed with Firebase or separate data store alternative from @David so you can create a persistent cache mechanism since you don't have access to the server where the application sits. It's basically another data store and you can update your logic in Middleman to either make a fresh call to the Github api or to pull from data saved in Firebase based on some checks you do when a person visits that Translation page. Check out the logic here

Answer 2

You can cache a single client's page by using local storage or a cookie. This way if the user refreshes, you can have logic to see if you want to query the API again. This would be fine if your user base was small.

This type of caching is typically done on the server since you are limiting yourself to ~357 users per hour at best.

To cache on the client side, store the data in local storage and log the time of the query. Then decide on an interval (let's say 5 minutes). Then prior to any refresh or page load, look a the users local storage and see if the query was within the last 5 minutes. If it was, read from the local storage. If not, then query the API again. This only applies to each user but by querying every 5 minutes, it would allow you to say ~30 users per hour.

http://diveintohtml5.info/storage.html