-
Notifications
You must be signed in to change notification settings - Fork 0
/
session-storage-example.html
102 lines (86 loc) · 3.33 KB
/
session-storage-example.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>sessionStorage example</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script language="javascript" src="javascript/vkHTML5LocalStorage.js"></script>
<!-- internal js specific for this example file -->
<script language="javascript">
// check for session storage support within the client
// if we have that, create a var db to hold the data
var db = getSessionStorage() || dispError("Session Storage not supported");
// Session Storage CRUD (equal to Session Storage, apart from the initiation)
// .sessionStorage initiates the session storage db
// .getItem() reads an element from session storage db
// .setItem() sets an element in session storage db
// .removeItem() removes an element from session storage db
// .clear() clears all elements from the session storage db
// Session Storage is scope limited to the window; multiple windows allow multiple sessions
// put the results of session storage on screen
function dispResults() {
if(errorMessage) {
myElement('results').innerHTML = errorMessage;
return;
}
// build a new table to display below the form
var tbl = new myTable();
tbl.addRow( ["Traveler", db.getItem("traveler")] );
tbl.addRow( ["Destination", db.getItem("destination")] );
tbl.addRow( ["Transportation", db.getItem("transportation")] );
// within div#results put the tbl we have put together
myElement('results').innerHTML = tbl.getTableHTML();
}
// when Go is pressed
function dbGo() {
// errorMessage gets set while checking of session storage is available
// here we use this to stop the function when Go is pressed without db
if(errorMessage) {
return;
}
// read the form which has three text fields
var pageForm = myElement("travelForm");
db.setItem("traveler", pageForm.elements["traveler"].value);
db.setItem("destination", pageForm.elements["destination"].value);
db.setItem("transportation", pageForm.elements["transportation"].value);
// execute dispResults
dispResults();
}
// when Clear is pressed
function dbClear() {
if(errorMessage) {
return;
}
db.clear();
dispResults();
}
// initiates script once window is loaded
window.onload = function() {
dispResults();
}
</script>
</head>
<body>
<div id="content">
<h1>sessionStorage example</h1>
<!-- the form used for data entry -->
<div id="form">
<form id="travelForm">
<table class="form">
<!-- the three text fields -->
<tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
<tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
<tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
<!-- the two buttons Clear & Go -->
<tr><td colspan="2" class="button">
<input id="formSubmit1" type="button" value="Clear" onClick="javascript:dbClear()" />
<input id="formSubmit2" type="button" value="Go" onClick="javascript:dbGo()" />
</td></tr>
</table>
</form>
</div>
<div id="results">
<!-- results are shown here -->
</div>
</div>
</body>
</html>