How to invalidate cache when changing a page using Ajax?

Question

I have a page with some editable functions that are updated via Ajax when they are edited. There are some values ​​that are stored in a cookie so that they can be loaded when the page loads. If the user makes changes, then goes to another page and presses the "Back" button to return, the original page is loaded from the cache without new values. If the user refreshes the page, the changes are reloaded from the cookie and the correct values ​​are displayed. Is it possible to invalidate the cache when the page dynamically changes? I want to be able to use the browser cache, so I don’t want the page to always invalidate the browser cache if I can help it. Any recommendations are appreciated.

Answer 1

You can upload your data via Ajax in the first place.

 $(document).ready(function(){
     $.get("your_ajax_url");
 });

Then, when you click the back button, the ajax call is repeated, and on the server side you send an HTTP response with the Etag cache or headers set correctly.

Answer 2

You need to set the cache headers in the HTTP response.

Depending on your technology, you can do this on a web server (for example, based on the corresponding URL) or in your code (for example, set the header using a framework or some API call).

In particular:

no-cache
expires

These are the ones you want.

Answer 3

$.ajax(
    {
        url: 'Serverpage name'
        cache: false,
        type: 'POST',
        success: function(msg)
        {
        });
    });

: false, .