How can cache XHR locally in a browser?

Question

I was wondering how can cache a XHR locally on my computer and use it for next time. Well I visit a online shop regular in the order page there is a form which includes a field with XHR and I have to fill then and then complete my order with submit button. Some times as there is heavy traffic on this site this files fail to load on my system and I have to refresh the page many times to get it. Is there any way to cache this to my computer and use it for next time. I have to say other fields of the form load completely and have not problem with them.

Answer 1

XHR responses are cached automatically in the browser cache if your HTTP cache headers permit it. For the simplest case, try sending your response with "Cache-Control: public, max-age=0" and "Last-Modified: [your timestamp]" headers to see the browser generating conditional requests with "If-Modified-Since" request headers, where you can then send just a "304 Not Modified" response and have the XHR API expose your cached response as a "200 Ok" response to your script. Or you can experiment with max-age/s-maxage and "Expires:" headers such that your request is served directly from the browser cache without even revalidation/server-roundtrip. You can also use "ETag" headers instead of "Last-Modified", but since ETags can be used for fingerprinting, I expect these to become inacceptable in the future for public HTTP access.

Note if you're using HTTP/2 with server-pushed resources, the rules change somewhat and cached responses are scoped to a session, also to avoid fingerprinting.

Answer 2

You can use Local Storage to store any data. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Use local overrides to create your own local js for remote site and use localStorage. https://developers.google.com/web/updates/2018/01/devtools#overrides