How to cache all requests in browser?

Question

My Webapp is React -> .NET -> SQL

I want to cache all post requests such that all .NET calls are made just once, next time it's fed from cache. For every small UI change in react I want to use the cache and save development time.

As it's Just for development, looking or something in Chrome maybe, is there an extension for such a task or any guide to what I should look into will be helpful.

score 1 · Accepted Answer · answered Nov 20 '18 at 09:18

How about using chrome.storag.local API where you can store, retrieve, and track changes to user data.

You can use it like this based from this SO post:

function fetchLive(callback) {
  doSomething(function(data) {
    chrome.storage.local.set({cache: data, cacheTime: Date.now()}, function() {
      callback(data);
    });
  });
}

function fetch(callback) {
  chrome.storage.local.get(['cache', 'cacheTime'], function(items) {
    if (items.cache && items.cacheTime && items.cacheTime) {
      if (items.cacheTime > Date.now() - 3600*1000) {
        return callback(items.cache); // Serialization is auto, so nested objects are no problem
      }
    }

    fetchLive(callback);
  });
}

Just remember that:

Chrome employs two caches — an on-disk cache and a very fast in-memory cache. The lifetime of an in-memory cache is attached to the lifetime of a render process, which roughly corresponds to a tab. Requests that are answered from the in-memory cache are invisible to the web request API.

How to cache all requests in browser?

1 Answers1