javascript清除表单缓存- disable form caching

表单缓存是指当用户在表单输入之后再次回到该表单的时候，浏览器会直接显示用户之前的输入。在大多数情况下这正是我们想要的，但也有些情况我们希望表单能够刷新，特别是根据后台刷新。我现在就遇到了这种问题：某网站有两个select box选择日期进行搜索，搜索结果还是返回相同页面。比如你先选择1月1号到1月2号，然后再选择2月3号到2月4号，这是如果用户点击后退，select还是会保持在2月3号到2月4号，但是实际的搜索却是1月1号到1月2号。
解决办法：

1. 清除缓存。这一大类又分为几小类，比如HTML header中加入：
 

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

或者是手动删除缓存，比如ctrl+f5；或者是修改浏览器的设置。

弊端是浏览器caching不能用了，浏览速度会降低。

2.比较好的方法：在form中加入autocomplete='off'属性，或者在input中加入autocomplete='off'属性，适用范围： safari, chrome in windows and all browser in mac

3. 可惜在windows环境下的firefox不行，这时我们可以在页面退出的时候刷新一下表单的内容，比如：
 

<script type="text/javascript" charset="utf-8">
     $(window).unload(function() {
            $('select').each(function(){
               var oThis = $(this);
               var oSelect = oThis.closest('select');
               oSelect.prepend(oThis);
          });
     });
</script>

 

4. 在windows环境下的IE更麻烦些，刷新表单内容是没有用的，我试过改变value和改变属性，都不行。唯一的方法是删除表单内容，但这样会使页面变得奇怪，后来想到可以先复制表单内容，然后再删除原有的内容。

 $(window).bind('beforeunload',function (e) {
        $('select').each(function () {
            var oThis = $(this);
            oThis.clone().insertBefore(oThis);
            oThis.remove();
        })
    })