-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebstorage-localstorage.html
159 lines (123 loc) · 4.24 KB
/
webstorage-localstorage.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE HTML>
<!--
written by Nick Shin - [email protected]
the code found in this file is licensed under:
- Unlicense - http://unlicense.org/
this file is from https://github.com/nickshin/CheatSheets/
this file contains some HTML5 snippets on:
- localStorage
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
reference sources:
+ http://www.html5rocks.com/en/tutorials/offline/whats-offline/#toc-web-storage
+ http://www.html5rocks.com/en/tutorials/offline/storage/#web-storage
DEMO!!!
+ http://html5demos.com/storage-events
notes:
+ localStorage: persistant object (across windows too)
+ sessionStorage: clears when window is closed
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
best viewed in editor with tab stops set to 4
NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
-->
<!-- ================================================== -->
<!-- START OF HTML -->
<html>
<head>
<title>LocalStorage : WebStoreage : HTML5 test code</title>
<!-- ================================================== -->
<!-- Cascade Style Sheets {{{ -->
<!-- ================================================== -->
<!-- Cascade Style Sheets }}} -->
<!-- Javascript {{{ -->
<!-- ================================================== -->
<script type='text/javascript' src='js/DebugLog.js'></script>
<!-- .................................................. -->
<!-- js/DebugLog.js {{{2 -->
<!-- .................................................. -->
<script>
// for this file, replacing (hooking) the log() and throw()
// with the DEBUGLOG system
var log_hook = DEBUGLOG.printhook;
var throw_hook = DEBUGLOG.printhook;
function debuglog_onload() {
DEBUGLOG.setElementById( 'logwindow' );
}
</script>
<!-- .................................................. -->
<!-- js/DebugLog.js }}}2 -->
<!-- localStorage {{{2 -->
<!-- .................................................. -->
<script>
function augmentStorage() {
// http://hacks.mozilla.org/2009/06/localstorage/
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
}
function localStorage_onload() {
log_hook( '<b>localStorage</b>' );
// ====================
augmentStorage();
// ====================
log_hook( 'the <b>API</b> way' );
localStorage.clear();
localStorage.setItem('foo', 'bar');
log_hook( 'getItem: ' + localStorage.getItem('foo') );
log_hook( 'key(0): ' + localStorage.key(0) );
localStorage.removeItem('foo');
log_hook( 'length: ' + localStorage.length );
// ====================
log_hook( '<hr>' );
log_hook( 'the <b>object</b> way' );
localStorage.length = 0;
localStorage.foo = 'bar';
log_hook( 'getItem: ' + localStorage.foo );
log_hook( 'getItem: ' + localStorage['foo'] );
log_hook( 'key(0): ' + localStorage[0] );
delete localStorage['foo'];
log_hook( 'length: ' + localStorage.length );
// ====================
log_hook( '<hr>' );
log_hook( '<b>JSON</b> objects' );
var data = {
greeting: 'hello there!',
question1: "what's your name?",
answer1: 'some call me tim?',
question2: "what's the meaning of life?",
answer2: 'the answer is 42'
};
localStorage.setObject( 'data', data );
var get = localStorage.getObject( 'data' );
log_hook( JSON.stringify( get ) );
// ====================
// nuke everything
localStorage.clear();
}
</script>
<!-- .................................................. -->
<!-- localStorage }}}2 -->
<!-- this document {{{2 -->
<!-- .................................................. -->
<script>
onload = onload_handler;
function onload_handler() {
debuglog_onload();
localStorage_onload();
}
</script>
<!-- .................................................. -->
<!-- this document }}}2 -->
<!-- Javascript }}} -->
<!-- ================================================== -->
</head>
<!-- ================================================== -->
<!-- START OF BODY -->
<body>
<!-- .................................................. -->
<div id="logwindow"></div>
<!-- ================================================== -->
</body>
</html>