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

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

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

1.页面初始如下:

 2.代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>页面刷新后保留表单的值</title>

    <style>

        #savehistory{

            width: 400px;margin: 0 auto;

        }

        .userselect{

            -moz-user-select: none;

            -webkit-user-select: none;

        }

    </style>

</head>

<body>

<div id="savehistory">

    <div class="userselect">hhhhhhhhhh</div>

    <input class="userselect" type="text"><br/>

    <input type="text"><br/>

    <input type="text"><br/>

    <input type="text"><br/>

    <input type="text"><br/>

    <input type="button" value="按钮1"><br/>

    <input type="button" value="按钮2"><br/>

    <input type="radio" name="sex"><br/>

    <input type="radio" name="sex"><br/>

    <input type="checkbox"><br/>

    <input type="checkbox"><br/>

    <input type="checkbox"><br/>

    <button id="save">一键缓存</button>

</div>

</body>

<script src="jquery-1.7.2.min.js"></script>

<script>

    $(function () {

        var localMsg;

        if(window.localStorage.formHistory){

            localMsg=JSON.parse(window.localStorage.formHistory);

        }

        if(localMsg && localMsg.length>=1){

            var realIndex=0;

            for(var i=0;i<$('#savehistory input').length;i++){

                if($($('#savehistory input')[i])[0].type=='text'){

                    $($('#savehistory input')[i]).val(localMsg[realIndex].text)

                    realIndex++;

                }else if($($('#savehistory input')[i])[0].type=='radio'){

                    $($('#savehistory input')[i]).prop('checked',localMsg[realIndex].radio)

                    realIndex++;

                }else if($($('#savehistory input')[i])[0].type=='checkbox'){

                    $($('#savehistory input')[i]).prop('checked',localMsg[realIndex].checkbox)

                    realIndex++;

                }

            }

        }

        $('#save').click(function () {

            var history=[];

            window.localStorage.formHistory='';

            for(var i=0;i<$('#savehistory input').length;i++){

                if($($('#savehistory input')[i])[0].type=='text'){

                    history.push({"text":$($('#savehistory input')[i]).val()})

                }else if($($('#savehistory input')[i])[0].type=='radio'){

                    history.push({"radio":$($('#savehistory input')[i]).attr('checked') ? 'checked' :''})

                }else if($($('#savehistory input')[i])[0].type=='checkbox'){

                    history.push({"checkbox":$($('#savehistory input')[i]).attr('checked') ? 'checked' :''})

                }

            }

            window.localStorage.formHistory=JSON.stringify(history)

        })

    })

</script>

</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. Light OJ 1032 - Fast Bit Calculations(数学）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1032 题目大意:一个十进制数变化为二进制,那么对于这个数,如果连着两个二进制位 ...

  2. Ajax调用SpringMVC ModelAndView 无返回情况

    在项目中使用Ajax的时候,success中返回的data一直都是null,也没有报错.在确定Ajax语法没有错误,也没有牵扯跨域问题后,用排除法挨着删除代码,发现是因为Spring MVC会自动把方 ...

  3. XtraGrid RepositoryItemCheckEdit 显示状态以及单选多选问题

    RepositoryItemCheckEdit默认有三种状态,选中状态.未选中状态和半选中状态(半选中状态通常用在TreeList中如果父节点下的子节点有选中的有未选中的,则父节点状态为半选中状态). ...

  4. [go语言学习指南]

    内部分享,根据自己的经验,收集汇总的go语言学习指南. 适合新手入门. 可以通过这里进行下载.

  5. 漫谈Linux内核哈希表(1)

    关于哈希表,在内核里设计两个很重要的数据结构:    哈希链表节点: 点击(此处)折叠或打开 .x [include/linux/types.h]*/ struct hlist_node { stru ...

  6. XE3随笔15：使用 IXMLHTTPRequest 简单获取网页源代码

    unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  7. android开发学习笔记000

    使用书籍:<疯狂android讲义>——李刚著,2011年7月出版 虽然现在已2014,可我挑来跳去,还是以这本书开始我的android之旅吧. “疯狂源自梦想,技术成就辉煌.” 让我这个 ...

  8. 一个Email

    Email 1.接受表单数据并用单独变量保存起来,判断用户协议,这个是必须同意的.2.判断验证码,利用验证码类Captcha.3.判断用户名,密码,邮箱规则,利用Verify类验证.4.判断唯一性,邮 ...

  9. 实战录 | 一起唠唠那些常见的DDoS攻击

    <实战录>导语 云端卫士<实战录>栏目定期会向粉丝朋友们分享一些在开发运维中的经验和技巧,希望对于关注我们的朋友有所裨益.本期分享人为云端卫士系统架构师高鹏,将带来常见的DDo ...

  10. PHP中$_SERVER的详细参数

    $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关. $_SERVER['argv'] #传递给该脚本的参数. $_SERVER['argc']  ...