html5 localStorage实现表单本地存储
进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新了页面或者出现了什么异常,导致页面上填写的信息消失了.还得重新填写信息,麻烦至极.
html5推出了本地存储的功能,localStorage以及sessionStorage.我打算利用他们来实现一个临时存储的功能,即使页面刷新,数据依然保留.
1.页面初始如下:
2.代码如下
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!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=
|
