Avoid Unwanted Browser Caching Using JavaScriptAverage Rating: 2.5/5 | Rate this item | 13 users have rated this item.

Expertise: Intermediate
Language: JavaScript

February 24, 2009

Avoid Unwanted Browser Caching Using JavaScript

Sometimes, you'll notice that when you open a URL (with dynamic content, and especially a pop-up window) a second time, the page displays the data which was displayed earlier and not the data newly expected. One example of this is when you open a pop-up window that shows exported data in Excel. This happens because browser has cached the earlier URL response and is displaying it (even if the content has changed in next request-response cycle). This tip addresses this problem.

What is "browser cache"? The browser has a folder in which certain items that have been downloaded are stored for future access. Graphic images (such as buttons, banners, icons, advertising, graphs, and color bars), photographs, and even entire web pages are examples of cache items. While accessing a web site, your computer will check its cache folder first to see if it already has the contents needed to display the page and, if so, it won't take the time to download them again. This makes for faster page loading.

Sometimes, the browser caches complete pages that have been visited and displays them in response to the same URL when visited again. The browser feels that it is helping us (and caching does help, but not in this situation).

The simplest way to solve this is to change the URL every time you visit. This can be done by adding a dummy request parameter (like the time) to the URL whose value changes every time you visit the page.

Suppose you have the URL:

window.open (http:\\localhost:8080/Web/calcuateInterest.jsp,,)

Change it to this URL :

window.open (http:\\localhost:8080/Web/calcuateInterest.jsp?dummyParameter=new Date().getTime(),,);

This URL actually appends the time in milliseconds as the request parameter. This changes the URL on each hit unless you manage to hit same URL in same millisecond.

Note: The JavaScript method getTime() of the Date object gives time elapsed in milliseconds.