title: Caching on frontend or on backend
body: <p>Right now I send my requests via ajax to the backend server, which does some operations, and returns a response:</p>
  
  <pre><code>function getData() {
    new Ajax().getResponse()
      .then(function (response) {
        // handle response
      })
      .catch(function (error) {
        // handle error
      });
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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
      });
  }
  </code></pre>
  
  <p>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 <code>getResponse</code>, I would just clear the cache.</p>
  
  <hr>
  
  <p>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?</p>