What is the best way to store the dom in cache to ensure that the page remains unchanged when navigating back using the back button?

When adding models to my JavaScript application's model collection using AJAX calls, I encounter an issue where if I click on a model and go to the next page, all the loaded models disappear when I hit the back button. What is the most effective way to ensure that the loaded models are preserved across all browsers? Specifically for mobile web. I have been researching solutions such as utilizing bfcache or JavaScript history, but I'm struggling to find a definitive answer. Is there a better alternative approach?

javascriptajaxdomweb-deploymentbfcache

Answer №1

To keep your data easily accessible, consider storing it in local storage and only fetching via ajax when it is not already stored there.

Instead of relying on the standard $.ajax function, you can implement this custom storage-based ajax approach:

function storageBasedAjax(url, cb){

    if (localStorage.getItem("myAxaxCache_"+url)){
      cb(localStorage.getItem("myAxaxCache_"+url));
      return;
    }       

   $.ajax({url: url, success: function(result){
     localStorage.setItem("myAxaxCache_"+url,result);
        cb(result);
   }});
}

Keep in mind to avoid overloading by refraining from using this method with URLs that have changing parameters for each call, as it may overwhelm the local storage capacity.

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

Error Encountered during Deployment of Custom React App on Heroku due to Fetch API Issue

After developing a small app using React without CRA, I successfully deployed it to Heroku. However, I encountered an issue where a static JSON file that I created isn't fetching properly (it works fine on my local machine). Upon encountering this pr ...

javascriptreactjsexpressheroku

Guide to Deactivating the ENTER Key Functionality in React Material UI Autocomplete Form

My React component features a Material UI Autocomplete form that is working perfectly, except for one issue - when the user hits ENTER, the input field gets cleared. I simply want to prevent the input field from being cleared when ENTER key is pressed. Des ...

javascriptreactjsautocompletematerial-ui

What is the best way to replicate an Ajax call similar to the way Postman does it?

After successfully retrieving JSON data from a URL using Postman, I received an array as a JSON string. Below are screenshots of the process: https://i.stack.imgur.com/6uLSS.png https://i.stack.imgur.com/vDF0L.png I now want to achieve the same result u ...

jqueryjsonajaxpostman

The unique behavior of nested observables within an Ionic2/Angular2 application

Creating an ionic login module involves using 2 observables, with one nested inside the other. Uncertainty exists regarding whether this is the correct implementation. The process includes calling the getHTTP() method to retrieve a string. If the string i ...

javascriptrestangularionic2rxjs

Can you explain the distinction between these two forms of functional components in ReactJs?

What sets apart these two code usages? In the FirstExample, focus is lost with every input change (It appears that each change triggers a rerender).. The SecondExample maintains focus and functions as intended. example import React, { useState } from &quo ...

javascriptreactjsreact-functional-component

Independent Dropbox Collections

Query: function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var ...

javascriptjqueryajax

I'm caught in a never-ending cycle as I navigate through sending information to my Python API and subsequently utilizing that information in the Next.js application to execute the Python script

I am encountering an issue with the response message, getting "Error sending data." The problem seems to arise when trying to retrieve data in server.py that is already specified in the code. For example, instead of using "msg_user", I should use ...

javascriptpythonreactjsnext.js

Looking to extract data from JavaScript using Scrapy 1.4.0?

Apologies for my lack of proficiency in English. As a beginner in scrapy, I am seeking guidance on an issue I encountered while trying to scrape a particular website. Below is the code for my spider: import scrapy from bs4 import BeautifulSoup as bs clas ...

javascriptscrapy

fetch data in json format from httpbin

I am trying to send my html form data as JSON by using an AJAX call to httpbin.org, but unfortunately, I'm not receiving the desired output. $("#contact").submit( $.ajax({ url: "http://httpbin.org/post", type:'POS ...

jqueryajaxjson

The method for transforming all headers into permalinks with jquery/javascript

I am looking for a way to transform all headers on a page into clickable permalinks using jQuery or JavaScript. Here is the HTML code: $('h3').each(function() { var id = $(this).attr('id'); if (id) { //Check if the element has a ...

javascriptjqueryhtmlpermalinkshtml-heading

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

javascriptjqueryhtmliframe

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

javascripthtmlcssangularjs

Updating DOM element value from controller in AngularJs following an AJAX request

Currently, I am facing an issue in my code where I want to display a progress bar and hide it until isLoaded becomes true. <uib-progressbar class="progress-striped active" value="100" type="warning" ng-hide="{{isLoaded}}"></uib-progressbar> I ...

jqueryajaxangularjs

Printing using *ngFor will display items in an ascending order

When attempting to display an object in markup, I am running into the issue of *ng printing it in ascending order instead of maintaining the original order. Ideally, I would like the elements to be printed as they are. You can view my code on StackBlitz ...

javascripthtmlangulartypescript

Sending form data after a successful AJAX request with jQuery in ASP.NET MVC 5

Within my Asp.net MVC 5 project, there exists a form equipped with a Submit button. Upon clicking this Submit button, the following tasks are to be executed: Client-side validation must occur using jQuery on various fields (ensuring required fields are ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

Retrieve components of Node.js Express response using axios before terminating with end()

Is there a way to receive parts of a response from my nodejs server before res.end() using axios? Example: Server router.get('/bulkRes', (req,res)=>{ res.write("First"); setTimeout(()=>{ res.end("Done"); },5000); }) Cl ...

javascriptnode.jsexpress

Erase jQuery from the text

I am struggling with splitting or removing text from a filename. For example, if I have filenames like: 200726100_50-0002.JPG 230514008_60-0001.JPG The desired result should be: 230514008_60.JPG 200726100_50.JPG Am I not using the split function cor ...

javascriptjqueryhtml

An essential component of Chai assertion is the inclusion of "or"

While attempting to iterate through a list of elements, I am looking to verify that the body contains either of two values. However, the current assertion method only allows me to check for one value: expect(cellText).includes(toDateFormat); Is there a wa ...

javascriptnode.jscypressmocha.jschai

The interaction between a parent element and an iframe, combining mouseover/out events with clicking actions

I am brand new to programming and seeking some guidance. I came across a post about mouseover/out combined with click behavior that I found intriguing. However, I am struggling to implement it successfully in my code. Here is the code snippet: Child.htm ...

javascriptjqueryhtmlcss

Dynamic Selection List Population in jqGrid

Using jqGrid 4.13.3 - free jqGrid In the Add form, there is a static input element and a select list element. The keyup ajax function is bound to the input element using dataEvents in the beforeInitData event. Once the Add form is displayed, entering a va ...

javascriptjqueryfree-jqgrid