浅谈 HTML5 的 DOM Storage 机制（2）
|
- UID
- 1066743
|
浅谈 HTML5 的 DOM Storage 机制（2）
当从下一个页面退回到本页面时，使用 windows.onload 在加载页面的时候将数据从 sessionStorage 中取出，并显示在输入框中，方便用户修改。
另外，给对象赋值除了用 setItem 方法外，也可以用 window.sessionStorage.key1 = “value1”。
清单 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
| <script type="text/javascript">
// 当退回到第一个页面时，从 sessionStorage 得到用户之前输入的值并显示在页面，方便修改
window.onload = function(){
if (window.sessionStorage) {
var name = window.sessionStorage.getItem("name");
var age = window.sessionStorage.getItem("age");
if (name != "" || name != null){
document.getElementById("name").value = name;
}
if (age != "" || age != null){
document.getElementById("age").value = age;
}
}else
{
// 不支持 sessionStorage，用 Dojo 实现相同功能
}
};
// 将数据保存到 sessionStorage 对象中
function saveToStorage() {
//sessionStorage
if (window.sessionStorage) {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
window.sessionStorage.setItem("name", name);
window.sessionStorage.setItem("age", age);
window.location.href="form2.html";
} else {
// 不支持 sessionStorage，用 Dojo 实现相同功能
}
}
</script>
<form action="./form2.html">
<input type="text" name="name" id="name">
<input type="text" name="age" id="age">
<input type="button" value="Next" onclick="saveToStorage()"></input>
</form>
|
清单 3 的第二个页面有一个 address 字段。当用户填写完毕后，点击 Submit 按钮提交页面，此时 addStorageValue 函数被调用，把保存在 sessionStorage 中的 name 和 age 值先赋给当前表单的两个隐藏字段，随后一起提交给下一个处理表单的页面。最后调用 removeItem 函数删除 name 和 age 值。
如果用户需要修改第一个页面填写的内容，可以点击 Back 按钮回到前一个页面，用户在前一个页面已经填写的内容会出现在 text 框中。
清单 3. 第二个表单页面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
| <script type="text/javascript">
// 将保持在 sessionStorage 中的数据赋给表单的隐藏属性
function addStorageValue() {
//sessionStorage
if (window.sessionStorage) {
var name = window.sessionStorage.getItem("name");
var age = window.sessionStorage.getItem("age");
document.getElementById("name").value = name;
document.getElementById("age").value = age;
window.sessionStorage.removeItem("name");
window.sessionStorage.removeItem("age");
} else {
// 不支持 sessionStorage，用 Dojo 实现相同功能
}
}
function backToPreviousForm() {
window.location.href="form1.html";
}
</script>
<form action="./form3.php" method="post">
<input type="hidden" name="name" id="name">
<input type="hidden" name="age" id="age">
<input type="text" name="address" id="address">
<input type="button" value="Back" onclick="backToPreviousForm()">
<input type="submit" value="Submit" onclick="addStorageValue()"></input>
</form>
|
|
|
|
|
|
|
