Right now I send my requests via ajax to the backend server, which does some operations, and returns a response:

function getData() {
  new Ajax().getResponse()
    .then(function (response) {
      // handle response
    })
    .catch(function (error) {
      // handle error
    });
}

The thing is that each time a user refreshes the website, every request is sent again. I've been thinking about caching them inside the local storage:

function getData() {
  if (Cache.get('getResponse')) {
    let response = Cache.get('getResponse');
    // handle response
    return true;
  }
  new Ajax().getResponse()
    .then(function (response) {
      // handle response
    })
    .catch(function (error) {
      // handle error
    });
}

This way if a user already made a request, and the response is cached inside the localStorage, I don't have to fetch data from the server. If a user changes values from the getResponse, I would just clear the cache.

Is this a good approach? If it is, is there a better way to do this? Also, should I cache backend responses the same way? What's the difference between frontend and backend caching?

Right now I send my requests via ajax to the backend server, which does some operations, and returns a response:

function getData() {
  new Ajax().getResponse()
    .then(function (response) {
      // handle response
    })
    .catch(function (error) {
      // handle error
    });
}

The thing is that each time a user refreshes the website, every request is sent again. I've been thinking about caching them inside the local storage:

function getData() {
  if (Cache.get('getResponse')) {
    let response = Cache.get('getResponse');
    // handle response
    return true;
  }
  new Ajax().getResponse()
    .then(function (response) {
      // handle response
    })
    .catch(function (error) {
      // handle error
    });
}

This way if a user already made a request, and the response is cached inside the localStorage, I don't have to fetch data from the server. If a user changes values from the getResponse, I would just clear the cache.

Is this a good approach? If it is, is there a better way to do this? Also, should I cache backend responses the same way? What's the difference between frontend and backend caching?

• javascript
• ajax
• http
• caching

• A nice trick is for an rpc cache is to return the cached value, make the query, and notify the consumers if the data has changed. That way the page renders quickly with a few elements updating, which the user may not notice. Its a nice way to hide latencies while reducing the burden of stale data. – Ben Manes Commented Jan 6, 2017 at 19:54

2 Answers 2

Is this a good approach? It depends on what kind of data you are storing

Be aware that everything stored on frontend can be changed by the user so this is potential security vulnerability.

This is the main difference between backend and frontend caching, backend caching can't be edited by the user.

If you decide to do frontend caching here is a code how to do it:

localStorage.setItem('getResponse', JSON.stringify(response));

For retrieving stored data from local storage

var retrievedObject = localStorage.getItem('getResponse');

NOTE:

I assume that you are storing object not a string or integer . If you are storing a string, integer, float... Just remove JSON.stringify

The best practice is to use The Cache API "a system for storing and retrieving network requests and their corresponding responses".

The Cache API is available in all modern browsers. It is exposed via the global caches property, so you can test for the presence of the API with a simple feature detection: