随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!!

进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新了页面或者出现了什么异常,导致页面上填写的信息消失了.还得重新填写信息,麻烦至极.

html5推出了本地存储的功能,localStorage以及sessionStorage.我打算利用他们来实现一个临时存储的功能,即使页面刷新,数据依然保留.

1.页面初始如下:

 2.代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面刷新后保留表单的值</title>
  6.     <style>
  7.         #savehistory{
  8.             width: 400px;margin: 0 auto;
  9.         }
  10.         .userselect{
  11.             -moz-user-select: none;
  12.             -webkit-user-select: none;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="savehistory">
  18.     <div class="userselect">hhhhhhhhhh</div>
  19.     <input class="userselect" type="text"><br/>
  20.     <input type="text"><br/>
  21.     <input type="text"><br/>
  22.     <input type="text"><br/>
  23.     <input type="text"><br/>
  24.     <input type="button" value="按钮1"><br/>
  25.     <input type="button" value="按钮2"><br/>
  26.     <input type="radio" name="sex"><br/>
  27.     <input type="radio" name="sex"><br/>
  28.     <input type="checkbox"><br/>
  29.     <input type="checkbox"><br/>
  30.     <input type="checkbox"><br/>
  31.     <button id="save">一键缓存</button>
  32. </div>
  33. </body>
  34. <script src="jquery-1.7.2.min.js"></script>
  35. <script>
  36.     $(function () {
  37.         var localMsg;
  38.         if(window.localStorage.formHistory){
  39.             localMsg=JSON.parse(window.localStorage.formHistory);
  40.         }
  41.         if(localMsg && localMsg.length>=1){
  42.             var realIndex=0;
  43.             for(var i=0;i<$('#savehistory input').length;i++){
  44.                 if($($('#savehistory input')[i])[0].type=='text'){
  45.                     $($('#savehistory input')[i]).val(localMsg[realIndex].text)
  46.                     realIndex++;
  47.                 }else if($($('#savehistory input')[i])[0].type=='radio'){
  48.                     $($('#savehistory input')[i]).prop('checked',localMsg[realIndex].radio)
  49.                     realIndex++;
  50.                 }else if($($('#savehistory input')[i])[0].type=='checkbox'){
  51.                     $($('#savehistory input')[i]).prop('checked',localMsg[realIndex].checkbox)
  52.                     realIndex++;
  53.                 }
  54.             }
  55.         }
  56.         $('#save').click(function () {
  57.             var history=[];
  58.             window.localStorage.formHistory='';
  59.             for(var i=0;i<$('#savehistory input').length;i++){
  60.                 if($($('#savehistory input')[i])[0].type=='text'){
  61.                     history.push({"text":$($('#savehistory input')[i]).val()})
  62.                 }else if($($('#savehistory input')[i])[0].type=='radio'){
  63.                     history.push({"radio":$($('#savehistory input')[i]).attr('checked') ? 'checked' :''})
  64.                 }else if($($('#savehistory input')[i])[0].type=='checkbox'){
  65.                     history.push({"checkbox":$($('#savehistory input')[i]).attr('checked') ? 'checked' :''})
  66.                 }
  67.             }
  68.             window.localStorage.formHistory=JSON.stringify(history)
  69.         })
  70.     })
  71. </script>
  72. </html>

　　3.在表单中填写好信息,并点击一键缓存

    4.将表单信息存储在localStorage中:

 5.f5刷新之后,js代码会去遍历localStorage.formHistory,然后取出来放在对应的位置.赶快来试一试吧!

html5 localStorage实现表单本地存储的更多相关文章

  1. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  2. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  3. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  4. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  5. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  6. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  7. HTML5基础扩展——地理位置、本地存储、缓存

    HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...

  8. HTML5学习总结-07 WebStorage 本地存储

    一 Storage sessionStorage session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失 localStorage 永久存储(可以手动删除数据)S ...

  9. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. task9暂存

    <h6>第一组项目</h6> <div class="wrap"> <div class="title"> &l ...

  2. 绘制相切弧arcTo

    绘制相切弧 语法: CanvasRenderingContext2D.arcTo( x1, y1, x2, y2, radius ) 描述: 该方法用于绘制圆弧 绘制的规则是当前位置与第一个参考点连线 ...

  3. .NET程序优化

    一.数据库操作 1. 用完马上关闭数据库连接 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证, 比较耗费服务器资 源.ASP.NET 中提供了连 ...

  4. CSS text-transform 属性

    text-transform 属性控制文本的大小写. h1 {text-transform:uppercase} h2 {text-transform:capitalize} p {text-tran ...

  5. 乌邦图ubuntu配置iptables的NAT上网

    cat /etc/network/iptables.up.rules # Generated by iptables-save v1. :: *nat :PREROUTING ACCEPT [:] : ...

  6. JAVA面向对象初步知识总结：封装、继承、多态

    1.封装 把数据和方法包装进类中,以及具体实现的隐藏,常共同被称作是是封装.其结果是一个同时带有特征和行为的数据类型.所谓具体实现的隐藏是通过访问权限控制实现的.JAVA 子类重写继承的方法时,不可以 ...

  7. Lua 单例类

    function SingleTon:new() local store = nil return function(self) if store then return store end loca ...

  8. 部署war包后，新增tomcat服务器，启动tomcat服务器报错解决方法

    导入Maven工程后,新增tomcat服务器,启动服务器后,报如下错误: 使用http访问页面的时候报如下错误: 经过百度后,有一种方法可以解决: 在eclipse tomcat无法启动,无法访问to ...

  9. RPM包的制作

    RPM包的制作 前言 按照其软件包的格式来划分,常见的Linux发行版主要可以分为两类,类ReadHat系列和类Debian系列,这两类系统分别提供了自己的软件包管理系统和相应的工具. 类RedHat ...

  10. 第一章 jQuery基础方法回顾

    jQuery即JavaScript,它是一个.js文件(官网下载).使用时须将jQuery库的声明写在HTML文档的head标签里. 章节内容: 1.选择DOM节点 2.延迟的JavaScript的执 ...