How to invalidate cache when the page is modified via Ajax?

Question

I have a page that has some editable features 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 is loaded. If the user makes a change, then goes to a different page and clicks the back button to return, the original page is loaded from cache without the new values. If the user refreshes the page, the changes are reloaded from the cookie and the correct values are displayed. Can I invalidate the cache when the page is dynamically modified? I want to be able to take advantage of the browser cache, so I don't want to make the page always invalidate the browser cache if I can help it. Any recommendations are appreciated.

Answer 1

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

Depending on your technology, you can do that in the web server (e.g. based on the URL in question) or in your code (e.g. set the header using your framework or some API call).

Specifically:

no-cache
expires

Are the ones you want.

Answer 2

You could load your data through Ajax in the first place.

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

Then when you hit the back button the ajax call is repeated and on the server side you send the http response with properly set cache or Etag headers.

Answer 3

you can write like this

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

Here setting cache: false, will not set any cache.