html5 localStorage实现表单本地存储
2016-08-04 14:34
531 查看
随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!!
进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新了页面或者出现了什么异常,导致页面上填写的信息消失了.还得重新填写信息,麻烦至极.
html5推出了本地存储的功能,localStorage以及sessionStorage.我打算利用他们来实现一个临时存储的功能,即使页面刷新,数据依然保留.
1.页面初始如下:
2.代码如下
3.在表单中填写好信息,并点击一键缓存
4.将表单信息存储在localStorage中:
5.f5刷新之后,js代码会去遍历localStorage.formHistory,然后取出来放在对应的位置.赶快来试一试吧!
进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新了页面或者出现了什么异常,导致页面上填写的信息消失了.还得重新填写信息,麻烦至极.
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实现表单本地存储
- HTML5本地存储-localStorage如何实现定时存储
- HTML5本地存储-localStorage如何实现定时存储
- HTML5本地存储Localstorage实现注册登录以及验证
- Html5系列(十一)store.js - 轻松实现本地存储(LocalStorage)
- HTML5 LocalStorage 本地存储
- 一款功能强大并且可以结合html5实现本地存储的数据库 – SQLite学习文档
- 【Html5每日练习】本地存储localStorage
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- html5本地存储localStorage实战(2)(转)
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- 一款功能强大并且可以结合html5实现本地存储的数据库 – SQLite学习文档
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- JavaScript本地存储实践(html5的localStorage和ie的userData)
- HTML5 localStorage本地存储实际应用举例(转)
- 一款功能强大并且可以结合html5实现本地存储的数据库 – SQLite学习文档
- JavaScript本地存储实践(html5的localStorage和ie的userData)的实例页面
- HTML5 本地存储 localstorage 安全分析
- html5的本地存储localstorage和web databases