← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/cache/cache-offline.html

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/cache/cache-offline.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Offline Caching</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Offline Caching</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
    <p>OfflineCache stores data in HTML 5 localStorage when available so that data persists across browser sessions. When localStorage is disabled or altogether unavailable (i.e., IE6 and IE7) data is simply cached in local JavaScript memory and will not persist across browser sessions.</p>
22
 
</div>
23
 
 
24
 
<div class="example">
25
 
    <style scoped>
26
 
/* custom styles for this example */
27
 
.demo fieldset {display:block; border:0;}
28
 
.demo .short {width:2em;}
29
 
</style>
30
 
 
31
 
<form id="demo1" class="demo">
32
 
    <h6>CacheOffline Instance #1</h6>
33
 
    <fieldset>
34
 
        <label for="demo1_expires">Data expires after: <input type="text" id="demo1_expires" class="med" value="86400000"> milliseconds
35
 
        <input type="button" id="demo1_setExpires" value="Set expires"></label>
36
 
    </fieldset>
37
 
    <fieldset>
38
 
        <label for="demo1_addKey">Key: <input type="text" id="demo1_addKey"></label>
39
 
        <label for="demo1_addValue">Value: <input type="text" id="demo1_addValue"></label>
40
 
        <input type="button" id="demo1_add" value="Cache value">
41
 
    </fieldset>
42
 
    <fieldset>
43
 
        <label for="demo1_retrieveKey">Key: <input type="text" id="demo1_retrieveKey"></label>
44
 
        <input type="button" id="demo1_retrieve" value="Retrieve value">
45
 
    </fieldset>
46
 
    <fieldset>
47
 
        <input type="button" id="demo1_flush" value="Flush cache"></label>
48
 
    </fieldset>
49
 
</form>
50
 
 
51
 
<form id="demo2" class="demo">
52
 
    <h6>CacheOffline Instance #2</h6>
53
 
    <fieldset>
54
 
        <label for="demo2_expires">Data expires after: <input type="text" id="demo2_expires" class="med" value="86400000"> milliseconds
55
 
        <input type="button" id="demo2_setExpires" value="Set expires"></label>
56
 
    </fieldset>
57
 
    <fieldset>
58
 
        <label for="demo2_addKey">Key: <input type="text" id="demo2_addKey"></label>
59
 
        <label for="demo2_addValue">Value: <input type="text" id="demo2_addValue"></label>
60
 
        <input type="button" id="demo2_add" value="Cache value">
61
 
    </fieldset>
62
 
    <fieldset>
63
 
        <label for="demo2_retrieveKey">Key: <input type="text" id="demo2_retrieveKey"></label>
64
 
        <input type="button" id="demo2_retrieve" value="Retrieve value">
65
 
    </fieldset>
66
 
    <fieldset>
67
 
        <input type="button" id="demo2_flush" value="Flush cache"></label>
68
 
    </fieldset>
69
 
</form>
70
 
 
71
 
 
72
 
<script>
73
 
YUI().use("node", "datatype-number", "cache-offline" ,function (Y) {
74
 
    var cache1 = new Y.CacheOffline({sandbox:"instance1"});
75
 
 
76
 
    Y.on("click", function(e){
77
 
        cache1.set("expires", Y.DataType.Number.parse(Y.one("#demo1_expires").get("value")));
78
 
        alert("Cache 1 \"expires\" set to " + cache1.get("expires") + ".");
79
 
    }, "#demo1_setExpires");
80
 
 
81
 
    Y.on("click", function(e){
82
 
        cache1.add(Y.one("#demo1_addKey").get("value"), Y.one("#demo1_addValue").get("value"));
83
 
        var msg = "Value cached. Cache 1 \"size\" is now " + cache1.get("size") + ".";
84
 
        alert(msg);
85
 
    }, "#demo1_add");
86
 
 
87
 
    Y.on("click", function(e){
88
 
        var entry = cache1.retrieve(Y.one("#demo1_retrieveKey").get("value")),
89
 
            output = entry ? entry.response : "Value not cached.";
90
 
        alert(output);
91
 
    }, "#demo1_retrieve");
92
 
 
93
 
    Y.on("click", function(e){
94
 
        cache1.flush();
95
 
        alert("Cache 1 flushed.");
96
 
    }, "#demo1_flush");
97
 
 
98
 
    var cache2 = new Y.CacheOffline({sandbox:"instance2"});
99
 
 
100
 
    Y.on("click", function(e){
101
 
        cache2.set("expires", Y.DataType.Number.parse(Y.one("#demo2_expires").get("value")));
102
 
        alert("Cache 2 \"expires\" set to " + cache2.get("expires") + ".");
103
 
    }, "#demo2_setExpires");
104
 
 
105
 
    Y.on("click", function(e){
106
 
        cache2.add(Y.one("#demo2_addKey").get("value"), Y.one("#demo2_addValue").get("value"));
107
 
        var msg = "Value cached. Cache 2 \"size\" is now " + cache2.get("size") + ".";
108
 
        alert(msg);
109
 
    }, "#demo2_add");
110
 
 
111
 
    Y.on("click", function(e){
112
 
        var entry = cache2.retrieve(Y.one("#demo2_retrieveKey").get("value")),
113
 
            output = entry ? entry.response : "Value not cached.";
114
 
        alert(output);
115
 
    }, "#demo2_retrieve");
116
 
 
117
 
    Y.on("click", function(e){
118
 
        cache2.flush();
119
 
        alert("Cache 2 flushed.");
120
 
    }, "#demo2_flush");
121
 
});
122
 
</script>
123
 
 
124
 
</div>
125
 
 
126
 
<pre class="code prettyprint">YUI().use(&quot;cache-offline&quot;, function(Y) {
127
 
    var cache = new Y.CacheOffline({
128
 
        sandbox:&quot;6-hr-cache&quot;, &#x2F;&#x2F; Pass in a unique identifier
129
 
        expires:21600000 &#x2F;&#x2F; Expire data after 6 hours
130
 
    });
131
 
 
132
 
    &#x2F;&#x2F; Add entries to the Cache
133
 
    cache.add(&quot;key1&quot;, &quot;value1&quot;);
134
 
    cache.add(&quot;key2&quot;, &quot;value2&quot;);
135
 
 
136
 
    &#x2F;&#x2F; Retrieve a cached entry
137
 
    var cachedentry = cache.retrieve(&quot;key1&quot;);
138
 
 
139
 
    &#x2F;&#x2F; Cached entry is an object with the following properties
140
 
    alert(&quot;cached key: &quot; + cachedentry.request +
141
 
        &quot; cached value: &quot; + cachedentry.response +
142
 
        &quot; cached at: &quot; + cachedentry.cached +
143
 
        &quot; expires at: &quot; + cachedentry.expires);
144
 
 
145
 
    &#x2F;&#x2F; Flush the cache
146
 
    cache.flush();
147
 
});</pre>
148
 
 
149
 
 
150
 
<h2>Complete Example Source</h2>
151
 
 
152
 
<pre class="code prettyprint">&lt;style scoped&gt;
153
 
&#x2F;* custom styles for this example *&#x2F;
154
 
.demo fieldset {display:block; border:0;}
155
 
.demo .short {width:2em;}
156
 
&lt;&#x2F;style&gt;
157
 
 
158
 
&lt;form id=&quot;demo1&quot; class=&quot;demo&quot;&gt;
159
 
&lt;h6&gt;CacheOffline Instance #1&lt;&#x2F;h6&gt;
160
 
&lt;fieldset&gt;
161
 
    &lt;label for=&quot;demo1_expires&quot;&gt;Data expires after: &lt;input type=&quot;text&quot; id=&quot;demo1_expires&quot; class=&quot;med&quot; value=&quot;86400000&quot;&gt; milliseconds
162
 
    &lt;input type=&quot;button&quot; id=&quot;demo1_setExpires&quot; value=&quot;Set expires&quot;&gt;&lt;&#x2F;label&gt;
163
 
&lt;&#x2F;fieldset&gt;
164
 
&lt;fieldset&gt;
165
 
    &lt;label for=&quot;demo1_addKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo1_addKey&quot;&gt;&lt;&#x2F;label&gt;
166
 
    &lt;label for=&quot;demo1_addValue&quot;&gt;Value: &lt;input type=&quot;text&quot; id=&quot;demo1_addValue&quot;&gt;&lt;&#x2F;label&gt;
167
 
    &lt;input type=&quot;button&quot; id=&quot;demo1_add&quot; value=&quot;Cache value&quot;&gt;
168
 
&lt;&#x2F;fieldset&gt;
169
 
&lt;fieldset&gt;
170
 
    &lt;label for=&quot;demo1_retrieveKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo1_retrieveKey&quot;&gt;&lt;&#x2F;label&gt;
171
 
    &lt;input type=&quot;button&quot; id=&quot;demo1_retrieve&quot; value=&quot;Retrieve value&quot;&gt;
172
 
&lt;&#x2F;fieldset&gt;
173
 
&lt;fieldset&gt;
174
 
    &lt;input type=&quot;button&quot; id=&quot;demo1_flush&quot; value=&quot;Flush cache&quot;&gt;&lt;&#x2F;label&gt;
175
 
&lt;&#x2F;fieldset&gt;
176
 
&lt;&#x2F;form&gt;
177
 
 
178
 
&lt;form id=&quot;demo2&quot; class=&quot;demo&quot;&gt;
179
 
&lt;h6&gt;CacheOffline Instance #2&lt;&#x2F;h6&gt;
180
 
&lt;fieldset&gt;
181
 
    &lt;label for=&quot;demo2_expires&quot;&gt;Data expires after: &lt;input type=&quot;text&quot; id=&quot;demo2_expires&quot; class=&quot;med&quot; value=&quot;86400000&quot;&gt; milliseconds
182
 
    &lt;input type=&quot;button&quot; id=&quot;demo2_setExpires&quot; value=&quot;Set expires&quot;&gt;&lt;&#x2F;label&gt;
183
 
&lt;&#x2F;fieldset&gt;
184
 
&lt;fieldset&gt;
185
 
    &lt;label for=&quot;demo2_addKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo2_addKey&quot;&gt;&lt;&#x2F;label&gt;
186
 
    &lt;label for=&quot;demo2_addValue&quot;&gt;Value: &lt;input type=&quot;text&quot; id=&quot;demo2_addValue&quot;&gt;&lt;&#x2F;label&gt;
187
 
    &lt;input type=&quot;button&quot; id=&quot;demo2_add&quot; value=&quot;Cache value&quot;&gt;
188
 
&lt;&#x2F;fieldset&gt;
189
 
&lt;fieldset&gt;
190
 
    &lt;label for=&quot;demo2_retrieveKey&quot;&gt;Key: &lt;input type=&quot;text&quot; id=&quot;demo2_retrieveKey&quot;&gt;&lt;&#x2F;label&gt;
191
 
    &lt;input type=&quot;button&quot; id=&quot;demo2_retrieve&quot; value=&quot;Retrieve value&quot;&gt;
192
 
&lt;&#x2F;fieldset&gt;
193
 
&lt;fieldset&gt;
194
 
    &lt;input type=&quot;button&quot; id=&quot;demo2_flush&quot; value=&quot;Flush cache&quot;&gt;&lt;&#x2F;label&gt;
195
 
&lt;&#x2F;fieldset&gt;
196
 
&lt;&#x2F;form&gt;
197
 
 
198
 
 
199
 
&lt;script&gt;
200
 
YUI().use(&quot;node&quot;, &quot;datatype-number&quot;, &quot;cache-offline&quot; ,function (Y) {
201
 
var cache1 = new Y.CacheOffline({sandbox:&quot;instance1&quot;});
202
 
 
203
 
Y.on(&quot;click&quot;, function(e){
204
 
    cache1.set(&quot;expires&quot;, Y.DataType.Number.parse(Y.one(&quot;#demo1_expires&quot;).get(&quot;value&quot;)));
205
 
    alert(&quot;Cache 1 \&quot;expires\&quot; set to &quot; + cache1.get(&quot;expires&quot;) + &quot;.&quot;);
206
 
}, &quot;#demo1_setExpires&quot;);
207
 
 
208
 
Y.on(&quot;click&quot;, function(e){
209
 
    cache1.add(Y.one(&quot;#demo1_addKey&quot;).get(&quot;value&quot;), Y.one(&quot;#demo1_addValue&quot;).get(&quot;value&quot;));
210
 
    var msg = &quot;Value cached. Cache 1 \&quot;size\&quot; is now &quot; + cache1.get(&quot;size&quot;) + &quot;.&quot;;
211
 
    alert(msg);
212
 
}, &quot;#demo1_add&quot;);
213
 
 
214
 
Y.on(&quot;click&quot;, function(e){
215
 
    var entry = cache1.retrieve(Y.one(&quot;#demo1_retrieveKey&quot;).get(&quot;value&quot;)),
216
 
        output = entry ? entry.response : &quot;Value not cached.&quot;;
217
 
    alert(output);
218
 
}, &quot;#demo1_retrieve&quot;);
219
 
 
220
 
Y.on(&quot;click&quot;, function(e){
221
 
    cache1.flush();
222
 
    alert(&quot;Cache 1 flushed.&quot;);
223
 
}, &quot;#demo1_flush&quot;);
224
 
 
225
 
var cache2 = new Y.CacheOffline({sandbox:&quot;instance2&quot;});
226
 
 
227
 
Y.on(&quot;click&quot;, function(e){
228
 
    cache2.set(&quot;expires&quot;, Y.DataType.Number.parse(Y.one(&quot;#demo2_expires&quot;).get(&quot;value&quot;)));
229
 
    alert(&quot;Cache 2 \&quot;expires\&quot; set to &quot; + cache2.get(&quot;expires&quot;) + &quot;.&quot;);
230
 
}, &quot;#demo2_setExpires&quot;);
231
 
 
232
 
Y.on(&quot;click&quot;, function(e){
233
 
    cache2.add(Y.one(&quot;#demo2_addKey&quot;).get(&quot;value&quot;), Y.one(&quot;#demo2_addValue&quot;).get(&quot;value&quot;));
234
 
    var msg = &quot;Value cached. Cache 2 \&quot;size\&quot; is now &quot; + cache2.get(&quot;size&quot;) + &quot;.&quot;;
235
 
    alert(msg);
236
 
}, &quot;#demo2_add&quot;);
237
 
 
238
 
Y.on(&quot;click&quot;, function(e){
239
 
    var entry = cache2.retrieve(Y.one(&quot;#demo2_retrieveKey&quot;).get(&quot;value&quot;)),
240
 
        output = entry ? entry.response : &quot;Value not cached.&quot;;
241
 
    alert(output);
242
 
}, &quot;#demo2_retrieve&quot;);
243
 
 
244
 
Y.on(&quot;click&quot;, function(e){
245
 
    cache2.flush();
246
 
    alert(&quot;Cache 2 flushed.&quot;);
247
 
}, &quot;#demo2_flush&quot;);
248
 
});
249
 
&lt;&#x2F;script&gt;</pre>
250
 
 
251
 
</div>
252
 
        </div>
253
 
 
254
 
        <div id="sidebar" class="yui3-u">
255
 
            
256
 
 
257
 
            
258
 
                <div class="sidebox">
259
 
                    <div class="hd">
260
 
                        <h2 class="no-toc">Examples</h2>
261
 
                    </div>
262
 
 
263
 
                    <div class="bd">
264
 
                        <ul class="examples">
265
 
                            
266
 
                                
267
 
                                    <li data-description="Basic caching functionality with the Cache Utility.">
268
 
                                        <a href="cache-basic.html">Basic Caching</a>
269
 
                                    </li>
270
 
                                
271
 
                            
272
 
                                
273
 
                                    <li data-description="Offline caching implements HTML 5 localStorage when available, to allow data to persist across browser sessions.">
274
 
                                        <a href="cache-offline.html">Offline Caching</a>
275
 
                                    </li>
276
 
                                
277
 
                            
278
 
                                
279
 
                            
280
 
                                
281
 
                            
282
 
                        </ul>
283
 
                    </div>
284
 
                </div>
285
 
            
286
 
 
287
 
            
288
 
                <div class="sidebox">
289
 
                    <div class="hd">
290
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
291
 
                    </div>
292
 
 
293
 
                    <div class="bd">
294
 
                        <ul class="examples">
295
 
                            
296
 
                                
297
 
                            
298
 
                                
299
 
                            
300
 
                                
301
 
                                    <li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
302
 
                                        <a href="../datasource/datasource-caching.html">DataSource with Caching</a>
303
 
                                    </li>
304
 
                                
305
 
                            
306
 
                                
307
 
                                    <li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
308
 
                                        <a href="../datasource/datasource-offlinecache.html">DataSource with Offline Cache</a>
309
 
                                    </li>
310
 
                                
311
 
                            
312
 
                        </ul>
313
 
                    </div>
314
 
                </div>
315
 
            
316
 
        </div>
317
 
    </div>
318
 
</div>
319
 
 
320
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
321
 
<script>prettyPrint();</script>
322
 
 
323
 
</body>
324
 
</html>