What is the best way to store XHR data in a browser's cache?

I have been seeking a solution to locally cache an XHR request on my computer for future use. Whenever I visit an online shop, I often encounter a form in the order page that includes a field with XHR. After filling out this field, I have to submit the form to complete my order. Unfortunately, during times of heavy traffic on the site, these files fail to load on my system, leading me to refresh the page multiple times. Is there a way to cache this data on my computer so I can access it without encountering these loading issues again? It's worth noting that other fields of the form load perfectly fine and do not pose any problems.

Answer №1

When it comes to XHR responses, the browser cache automatically stores them based on your HTTP cache headers. To keep things simple, consider sending your response with "Cache-Control: public, max-age=0" and "Last-Modified: [your timestamp]" headers. This will prompt the browser to make conditional requests with "If-Modified-Since" headers, allowing you to respond with a "304 Not Modified" message if needed. By playing around with max-age/s-maxage and "Expires:" headers, you may even be able to serve your request directly from the browser cache without revalidation or server-roundtrip. While ETag headers can be used instead of "Last-Modified", they may not be as secure due to potential fingerprinting risks.

If you are utilizing HTTP/2 with server-pushed resources, keep in mind that cached responses are scoped to a session to prevent fingerprinting techniques.

Answer №2

Storing any type of data is possible using Local Storage. Check out this link for more information: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage You can also use local overrides to create your own local javascript code for a remote website and utilize localStorage. Learn more about local overrides here: https://developers.google.com/web/updates/2018/01/devtools#overrides

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a WriteableDraft error in Redux when using Type Definitions in TypeScript

I'm facing a type Error that's confusing me This is the state type: export type Foo = { animals: { dogs?: Dogs[], cats?: Cats[], fishs?: Fishs[] }, animalQueue: (Dogs | Cats | Fishs)[] } Now, in a reducer I&a ...

javascript typescript redux redux-toolkit

NodeJS - Subtract one array from another, while keeping all duplicates in place

Although the title may be misleading, how can you achieve the following: a = [1, 2, 2, 3, 3, 3]; b = [1, 2, 3]; a.subtract(b); I am aiming for a result of [2, 3, 3] instead of an empty array, as seen in other similar solutions. I want to remove only the ...

javascript arrays node.js

Ways to split a string using jQuery

I am working with a jQuery string array that contains the following elements: ["$1#Structure$2#Accounting$3Acc#$1Programming"] My task is to split the strings after the '#' symbol and provide the following result: ["Structure","Accounting","Ac ...

javascript jquery string

Using React hooks and Typescript: I was expecting to see an assignment or function call, but instead, an expression was

After working as a React developer for quite some time, my workplace recently introduced Typescript, which I am still getting familiar with. I implemented a custom hook for managing cookies, but the function it returns is generating an error. Here's ...

javascript reactjs typescript

The console is displaying the array, but it is not being rendered in HTML format in AngularJS

Can you please review my App.js file and let me know if there are any mistakes? I have provided the necessary files index.html and founditemtemplate.html below. Although it is returning an array of objects in the console, it is not displaying them as inten ...

javascript html angularjs

Discovering latitude and longitude coordinates from a map URL, then enhancing dynamism by utilizing the coordinates as parameters

Hello, I am currently learning Vue.js and have encountered a challenge with embedding Google Maps URLs. Despite my extensive research on Google, I have not been able to find the solution I need. Here is an example of the URL I am working with: "https: ...

javascript vue.js google-maps url

NSInvalidArgumentException' error: 'Unrecognized selector sent to instance of __NSCFString

Below is the code snippet I am referring to: The nameLabel text attribute is set as the UserFullName from the unknown_object array in dict_Details. And here is my response: The getUserReviewsResponse data shows a status code of 200 and includes an ar ...

ios objective-c json

Validation error occurred while attempting to send form data to the Contact Form 7 API through Next.js

Having trouble sending data to the Contact Form 7 API and encountering an error while submitting the form: {into: "#", status: "validation_failed", message: "One or more fields have an error. Please check and try again.", post ...

javascript api post next.js contact-form-7

Ways to manage multiple Observables

Two Observables are being returned from different services, each providing only one value (similar to Observable.just()). In TypeScript, types play a crucial role in this context. Is there a method to determine when both Observables have been resolved (in ...

javascript typescript rxjs rxjs5

Applying CSS styles to a page depending on certain conditions

Currently, I have a page in SharePoint that can function as a pop-up. I am using JavaScript to identify whether it is a pop-up by checking if window.location.search.match("[?&]IsDlg=1"). However, I am struggling to figure out how to insert CSS based on ...

javascript css

What steps should I take to develop an Outlook add-in that displays read receipts for action items in sent emails?

Currently, I am in the process of developing an add-in that will enable me to track email activity using a tool called lead-boxer (). With this add-in, I am able to retrieve detailed information about users who have opened my emails by sending them with an ...

javascript outlook-addin office-addins outlook-web-addins

What is the process of acquiring JSON and converting it into a JavaScript object array?

Can someone please assist me in converting the JSON generated in Spring Boot into a JavaScript object array? I'm currently facing some difficulties. https://i.stack.imgur.com/Tx5Ri.png I've been using XMLHttpRequest and my JS code is as follows ...

javascript json ajax

Common mistakes encountered when utilizing webpack for react development

I'm currently following the exercises in Pro MERN Stack by Apress and have come across a webpack issue. Everything was running smoothly until I introduced webpack into the mix. Now, when I execute npm run compile, I encounter the following error: > ...

javascript reactjs webpack mern

Retrieve data in various formats (XML and JSON) using a RestController in Java

Let me present you with a query. I currently have a RestController that permits calls such as: @RequestMapping(value = "/notifications", method = RequestMethod.POST) public void postNotification(@RequestBody final Notification notification) { //DoS ...

java json xml rest spring-mvc

Calculating the Bounding Box of SVG Group Elements

Today I encountered a puzzling scenario involving bounding box calculations, and it seems that I have yet to fully understand the situation. To clarify, a bounding box is described as the smallest box in which an untransformed element can fit within. I h ...

javascript svg bounding-box getboundingclientrect

Implementing JavaScript for showcasing weights

I've encountered a JavaScript function that modifies user preferences for weight units, allowing them to choose between metric and imperial measurements. When displaying weights on my page, I typically present them as follows: This is a brief explan ...

javascript jquery html

What could be causing the malfunction of my token rotation feature in nextAuth?

I am developing a web application that involves working with an external API alongside my team member. We are making API requests using Next.js. I have implemented nextAuth for authentication, but I am facing issues with token rotation. After successful lo ...

javascript reactjs next.js jwt next-auth

Using Javascript or jQuery, focus on a div containing a paragraph element with a particular text

I've been struggling for hours trying to figure out how to select a div that contains a specific p element. HTML <div class="NavBar_Row_Button2"><p>DONATE</p></div> <div class="NavBar_Row_Button2"><p>CONTACT</p ...

javascript jquery

press a cURL PHP ajax button to trigger an action

Hello everyone, I could really use some help here. I've been looking at similar questions but none of the answers seem to apply to my situation. I extracted a page using curl, however, there's a button on that page that I am unable to interact w ...

javascript php ajax curl

JavaScript Recursive Function for Generating FancyTree JSON Structure

I'm currently building an array of JSON objects for FancyTree (https://github.com/mar10/fancytree/wiki/TutorialLoadData). My JSON source is from the Jira REST service, and its structure can vary widely. Therefore, the code to construct the array of JS ...

javascript json recursion fancytree

JavaScripter Q&A