html5 localStorage实现表单本地存储

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

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

   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,然后取出来放在对应的位置.赶快来试一试吧!

posted on 2016-08-04 14:34  Ricky_Huang  阅读(9740)  评论(2)  编辑  收藏  举报