PushState history and cache page

Question

How to cache a page loaded via ajax using the PushState URL so that the page can be reloaded from the server? For instance,

page 1: /foo.html. click the button, send ajax request, get a response and refresh the page. The history of pushState as a new page /bar.html.

   history.pushState({}, '','/bar.html');

At this point, the browser likes to cache the current page as /bar.html.

window.onpopstate = function(event) {
  // browser is not loading page automatically for back/forward
  if (event.state)
    location.reload();
};

When you press the back / forward button, the /bar.html file should be loaded from the browser cache. But it boots from the server again. How to achieve this? that is, let the updated ajax page be processed like a regular GET / bar.html and cached by the browser. as?

Thanks for any hint. Dave

Answer 1

HTTP-, (Cache-Control, Expires, Last-Modified ..), . . (ISP, , ). - .

, . , HTTP (html, json ..). , A, , ajax url api. B. C. A, B C . B, , api URL-. URL- popstate.

• - popstate ajax-. B , ( ).

• , ajax , , URL:

  state = { your_key: your_value }
  history.pushState(state, title, url)
  

  popstate, , .

  $(window).on('popstate', function(event) { 
     var state = event.originalEvent.state; 
     if (state) { 
        // use it to modify the page 
     }else{ 
        // ajax call to get the data 
     }
  });
  

  , , .

, . , (, ) . , "", ajax. ( )