表单缓存是指当用户在表单输入之后再次回到该表单或者刷新页面的时候,浏览器会直接显示用户之前的输入,即表单缓存下来了。多数情况下这正是我们想要的,但也有些情况我们希望表单能够刷新,特别是根据后台的数据刷新。例如:单选框   radio属性,当我们点击之后,刷新一下页面,刚才点击的选项并没有清除,而是缓存了下来。原因:表单缓存造成的。

解决办法:

1. 清除页面缓存。HTML header中加入:

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

<metahttp-equiv="cache-control" content="no-cache">

<meta http-equiv="expires"content="0">

或者

是手动删除缓存,或者是修改浏览器的设置。

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

2.比较好的方法:在form中加入autocomplete='off'属性,或者在input中加入autocomplete='off'属性,

好处:满足大部分浏览器 ,不产生表单缓存

3.在页面退出的时候刷新一下表单的内容,比如:

<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();

});

注意:浏览器需要enable cache才能看到3,4的效果
----------------------------------------------------------------------------------

原文:https://blog.csdn.net/g893465244/article/details/43967647

javascript--清除表单缓存的更多相关文章

  1. 项目总结15:JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

  2. vue 新增时清除表单验证注意事项

    // 清除表单校验的提示 if (this.$refs['XXX']) { // 延时执行 this.$nextTick(function () { this.$refs['XXX'].clearVa ...

  3. 第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据

    封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...

  4. 第一百五十四节,封装库--JavaScript,表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  5. 第一百五十三节,封装库--JavaScript,表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  6. 第一百五十二节,封装库--JavaScript,表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  7. 第一百五十一节,封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  8. 第一百五十节,封装库--JavaScript,表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  9. 第一百四十九节,封装库--JavaScript,表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

随机推荐

  1. 重装Mac系统

    首先介绍重装macos的一些重要事项: 重装系统之前需要弄清楚本机上安装的系统版本. 重装系统是需要管理员账户的. 获取系统镜像有多种方式,其中最常见的方式是从appstore中获取,但要注意的是要确 ...

  2. WPF分析工具

    分析WPF程序是理解其行为很重要的一步,市场上有大量现成的WPF程序分析工具,如Snoop,WPFPerf,Perforator和Visual Profiler,其中Perforator和Visual ...

  3. Dart 中常用的数组操作方法总结

    这里总结了一些在 Dart 中常用的数组操作方法,以便查阅. 首先,我们准备两组数据,以方便后面使用: List<Map> students = [ { 'name': 'tom', 'a ...

  4. 数据分析入门——IPython入门

    一.什么是IPython IPython的开发者吸收了标准解释器的基本概念,在此基础上进行了大量的改进,创造出一个令人惊奇的工具.在它的主页上是这么说的:“这是一个增强的交互式Python shell ...

  5. nginx client_body_buffer_size

    http://www.bubuko.com/infodetail-1760832.html 上传文件过大时,nginx会报链接里面的warn,请求body写磁盘到缓存文件,导致性能降低,可适当调大该参 ...

  6. 【Leetcode_easy】993. Cousins in Binary Tree

    problem 993. Cousins in Binary Tree 参考 1. Leetcode_easy_993. Cousins in Binary Tree; 完

  7. robot:根据条件主动判定用例失败或者通过

    场景: 当用例中的断言部分需要满足特定条件时才会执行,如果不满足条件时,可以主动判定该用例为passed状态,忽略下面的断言语句. 如上图场景,当每月1号时,表中才会生成上月数据,生成后数据不会再有改 ...

  8. 常见问题:计算机网络/完整HTTP访问

    域名解析 以浏览器进行HTTP访问为例,首先搜索自身DNS缓存(一般缓存1000条左右,仅缓存1分钟),若有且未过期,结束. 若未找到,则搜索操作系统的DNS缓存. 若未找到,尝试读取hosts文件. ...

  9. KVM虚拟机两种配置的概念不同之处

    KVM虚拟机配置的两种方式之间的不同之处 NAT方式 NAT模式中,让虚拟机借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网. NAT模式中,虚拟机的网卡和物理网卡的网络,不在同一个网 ...

  10. windows下大数据开发环境搭建(3)——Scala环境搭建

    一.所需环境 ·Java 8   二.下载Scala https://www.scala-lang.org/download/ 三.配置环境变量 SCALA_HOME: C:\scala Path: ...