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?