flash reapperas on refresh

How to prevent flash messages from reappearing when a page is refreshed.

I show flash message through javascript, that basically created an overlay div and shows the flash. When the the overlay is dismissed the flash div's contents are emptied as well, but I notice that when a page is refreshed (for example, user logs in -> gets redirected to home page -> is shown "Welcome user" flash), the flash message keeps reappearing.

Thanks

<% if !flash.nil? %>   <% if flash[:notice] %>   <script type="text/javascript">       //<![CDATA[       showFlash("<%= flash[:notice] %>", "flash-notice");       //]]>     </script>   <% end %>   <% if flash[:success] %>   <script type="text/javascript">       //<![CDATA[       showFlash("<%= flash[:success] %>", "flash-success");       //]]>     </script>

  <% end %>   <% if flash[:error] %>   <script type="text/javascript">       //<![CDATA[       showFlash("<%= flash[:error] %>", "flash-error");       //]]>     </script>   <% end %> <% end %>

function showFlash(msg, tp) {     if ($('#flash_messages_container').length > 0) {         flashAnimatedHide();     }

    var flashContainer = $("<div id='flash_messages_container' class='flash-messages " + tp + " '></div>");     flashContainer.prepend("<div id='flash_messages_content'>" + msg + "<span class='go-right sprite close' id='close_flash'></span></div>");     $('body').prepend(flashContainer);     flashContainer.animate({         opacity : .1     }, '500', function(){         flashContainer.css('opacity', 1)     })     $('body').css('margin-top', flashContainer.outerHeight());     $('#close_flash').click(function() {         flashAnimatedHide();         $('body').css('margin-top', '0');     }); }

UPDATE

I suspect this is happening since I starting using etags for cient side and reverse proxy caching. So I guess the refresh is simply loading the cached page, which contains the flash messages in the flash container. So how do people discard flash when caching is enabled?