forked from Upstatement/jquery-total-storage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
125 lines (111 loc) · 3.47 KB
/
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html> <!--[if lt IE 7 ]><html
dir="ltr" lang="en-US" class="no-js ie ie6 lte7 lte8 lte9"><![endif]--> <!--[if IE 7 ]><html
dir="ltr" lang="en-US" class="no-js ie ie7 lte7 lte8 lte9"><![endif]--> <!--[if IE 8 ]><html
dir="ltr" lang="en-US" class="no-js ie ie8 lte8 lte9"><![endif]--> <!--[if IE 9 ]><html
dir="ltr" lang="en-US" class="no-js ie ie9 lte9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html
dir="ltr" lang="en-US" class="no-js"><!--<![endif]--><head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.total-storage.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
refreshKeyList();
$('.trigger-key-save').click(function(e){
e.preventDefault();
var key = $('#field-key').val();
var val = $('#field-value').val();
if (val){
$.totalStorage(key, val);
alert('Saved value for ' + key);
} else {
alert('You need to enter a value, fool');
}
refreshKeyList();
});
$('.trigger-key-get').click(function(e){
e.preventDefault();
var key = $('#field-key-get').val();
trace(key);
var val = $.totalStorage(key);
trace('val = ' + val);
if (val){
$('#value-output').html(val);
}
});
function refreshKeyList(){
var list = $.totalStorage.getAll();
var str = '';
for (var i = 0; i<list.length; i++){
if (i == list.length - 1){
str += 'and ' + list[i].key;
} else {
str += list[i].key + ', ';
}
}
$('.key-list').html(str);
}
function trace(m){
try {
console.log(m);
} catch(e){
}
}
});
</script>
<style type="text/css">
* {
box-sizing:border-box; font-family:"Helvetica Neue", Arial, sans-serif;
}
.io-col {
width:46%; padding:20px; border:1px solid #CCC; float:left; height:300px; margin:2%;
}
.big-button {
background-color:#6296be; color:white; font-weight:bold; font-size:18px;
border-radius:12px; box-shadow:0px 0px 15px rgba(0, 0, 0, .35); border:2px solid white; padding:5px 20px;
}
label {
min-width:20%; font-size:12px; float:left; padding-top:4px;
}
fieldset {
border:0px; padding:0px; margin:0px; margin-bottom:20px;
}
.text-input {
border:1px solid #CCC; padding:4px 10px; font-size:16px; width:80%; color:#333;
}
pre {
font-family:courier, 'courier new', mono-space;
}
h4 {
margin-top:0px;
}
</style>
</head>
<body>
<form id="input" class="io-col">
<h4>To set a value:</h4>
<pre>$.totalStorage(key, value);</pre>
<fieldset>
<label for="field-key">Key:</label>
<input type="text" id="field-key" placeholder="Enter a key to save under" class="text-input" />
</fieldset>
<fieldset>
<label for="field-value">Value:</label>
<textarea id="field-value" placeholder="Enter the value that should be stored" class="text-input"></textarea>
</fieldset>
<input type="submit" class="trigger-key-save big-button" value="Save!">
</form>
<form id="output" class="io-col">
<h4>To retrieve a value:</h4>
<pre>$.totalStorage(key);</pre>
<fieldset>
<label for="field-key">Key:</label>
<input type="text" id="field-key-get" class="text-input" />
<p class="hint">Available values are: <span class="key-list"></span></p>
</fieldset>
<fieldset>
<label for="value-output">Result:</label>
<div id="value-output"></div>
</fieldset>
<input type="submit" class="trigger-key-get big-button" value="Get!">
</form>
</body>
</html>