<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Offline Caching</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Offline Caching</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="intro">
<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>
</div>
<div class="example">
<style scoped>
/* custom styles for this example */
.demo fieldset {display:block; border:0;}
.demo .short {width:2em;}
#out {border:1px solid #CCC; padding:1em}
</style>
<form id="demo1" class="demo">
<h6>CacheOffline Instance #1</h6>
<fieldset>
<label for="demo1_expires">Data expires after: <input type="text" id="demo1_expires" class="med" value="86400000"> milliseconds
<input type="button" id="demo1_setExpires" value="Set expires"></label>
</fieldset>
<fieldset>
<label for="demo1_addKey">Key: <input type="text" id="demo1_addKey"></label>
<label for="demo1_addValue">Value: <input type="text" id="demo1_addValue"></label>
<input type="button" id="demo1_add" value="Cache value">
</fieldset>
<fieldset>
<label for="demo1_retrieveKey">Key: <input type="text" id="demo1_retrieveKey"></label>
<input type="button" id="demo1_retrieve" value="Retrieve value">
</fieldset>
<fieldset>
<input type="button" id="demo1_flush" value="Flush cache"></label>
</fieldset>
</form>
<form id="demo2" class="demo">
<h6>CacheOffline Instance #2</h6>
<fieldset>
<label for="demo2_expires">Data expires after: <input type="text" id="demo2_expires" class="med" value="86400000"> milliseconds
<input type="button" id="demo2_setExpires" value="Set expires"></label>
</fieldset>
<fieldset>
<label for="demo2_addKey">Key: <input type="text" id="demo2_addKey"></label>
<label for="demo2_addValue">Value: <input type="text" id="demo2_addValue"></label>
<input type="button" id="demo2_add" value="Cache value">
</fieldset>
<fieldset>
<label for="demo2_retrieveKey">Key: <input type="text" id="demo2_retrieveKey"></label>
<input type="button" id="demo2_retrieve" value="Retrieve value">
</fieldset>
<fieldset>
<input type="button" id="demo2_flush" value="Flush cache"></label>
</fieldset>
</form>
<div id="out">(cache results here)</div>
<script>
YUI().use("node", "datatype-number", "cache-offline" ,function (Y) {
var cache1 = new Y.CacheOffline({sandbox:"instance1"}),
out = Y.one("#out");
Y.on("click", function(e){
cache1.set("expires", Y.DataType.Number.parse(Y.one("#demo1_expires").get("value")));
out.set('text', "Cache 1 \"expires\" set to " + cache1.get("expires") + ".");
}, "#demo1_setExpires");
Y.on("click", function(e){
cache1.add(Y.one("#demo1_addKey").get("value"), Y.one("#demo1_addValue").get("value"));
var msg = "Value cached. Cache 1 \"size\" is now " + cache1.get("size") + ".";
out.set('text', msg);
}, "#demo1_add");
Y.on("click", function(e){
var entry = cache1.retrieve(Y.one("#demo1_retrieveKey").get("value")),
output = entry ? entry.response : "Value not cached.";
out.set('text', output);
}, "#demo1_retrieve");
Y.on("click", function(e){
cache1.flush();
out.set('text', "Cache 1 flushed.");
}, "#demo1_flush");
var cache2 = new Y.CacheOffline({sandbox:"instance2"});
Y.on("click", function(e){
cache2.set("expires", Y.DataType.Number.parse(Y.one("#demo2_expires").get("value")));
out.set('text', "Cache 2 \"expires\" set to " + cache2.get("expires") + ".");
}, "#demo2_setExpires");
Y.on("click", function(e){
cache2.add(Y.one("#demo2_addKey").get("value"), Y.one("#demo2_addValue").get("value"));
var msg = "Value cached. Cache 2 \"size\" is now " + cache2.get("size") + ".";
out.set('text', msg);
}, "#demo2_add");
Y.on("click", function(e){
var entry = cache2.retrieve(Y.one("#demo2_retrieveKey").get("value")),
output = entry ? entry.response : "Value not cached.";
out.set('text', output);
}, "#demo2_retrieve");
Y.on("click", function(e){
cache2.flush();
out.set('text', "Cache 2 flushed.");
}, "#demo2_flush");
});
</script>
</div>
<pre class="code prettyprint">YUI().use("cache-offline", function(Y) {
var cache = new Y.CacheOffline({
sandbox:"6-hr-cache", // Pass in a unique identifier
expires:21600000 // Expire data after 6 hours
});
// Add entries to the Cache
cache.add("key1", "value1");
cache.add("key2", "value2");
// Retrieve a cached entry
var cachedentry = cache.retrieve("key1");
// Cached entry is an object with the following properties
alert("cached key: " + cachedentry.request +
" cached value: " + cachedentry.response +
" cached at: " + cachedentry.cached +
" expires at: " + cachedentry.expires);
// Flush the cache
cache.flush();
});</pre>
<h2>Complete Example Source</h2>
<pre class="code prettyprint"><style scoped>
/* custom styles for this example */
.demo fieldset {display:block; border:0;}
.demo .short {width:2em;}
#out {border:1px solid #CCC; padding:1em}
</style>
<form id="demo1" class="demo">
<h6>CacheOffline Instance #1</h6>
<fieldset>
<label for="demo1_expires">Data expires after: <input type="text" id="demo1_expires" class="med" value="86400000"> milliseconds
<input type="button" id="demo1_setExpires" value="Set expires"></label>
</fieldset>
<fieldset>
<label for="demo1_addKey">Key: <input type="text" id="demo1_addKey"></label>
<label for="demo1_addValue">Value: <input type="text" id="demo1_addValue"></label>
<input type="button" id="demo1_add" value="Cache value">
</fieldset>
<fieldset>
<label for="demo1_retrieveKey">Key: <input type="text" id="demo1_retrieveKey"></label>
<input type="button" id="demo1_retrieve" value="Retrieve value">
</fieldset>
<fieldset>
<input type="button" id="demo1_flush" value="Flush cache"></label>
</fieldset>
</form>
<form id="demo2" class="demo">
<h6>CacheOffline Instance #2</h6>
<fieldset>
<label for="demo2_expires">Data expires after: <input type="text" id="demo2_expires" class="med" value="86400000"> milliseconds
<input type="button" id="demo2_setExpires" value="Set expires"></label>
</fieldset>
<fieldset>
<label for="demo2_addKey">Key: <input type="text" id="demo2_addKey"></label>
<label for="demo2_addValue">Value: <input type="text" id="demo2_addValue"></label>
<input type="button" id="demo2_add" value="Cache value">
</fieldset>
<fieldset>
<label for="demo2_retrieveKey">Key: <input type="text" id="demo2_retrieveKey"></label>
<input type="button" id="demo2_retrieve" value="Retrieve value">
</fieldset>
<fieldset>
<input type="button" id="demo2_flush" value="Flush cache"></label>
</fieldset>
</form>
<div id="out">(cache results here)</div>
<script>
YUI().use("node", "datatype-number", "cache-offline" ,function (Y) {
var cache1 = new Y.CacheOffline({sandbox:"instance1"}),
out = Y.one("#out");
Y.on("click", function(e){
cache1.set("expires", Y.DataType.Number.parse(Y.one("#demo1_expires").get("value")));
out.set('text', "Cache 1 \"expires\" set to " + cache1.get("expires") + ".");
}, "#demo1_setExpires");
Y.on("click", function(e){
cache1.add(Y.one("#demo1_addKey").get("value"), Y.one("#demo1_addValue").get("value"));
var msg = "Value cached. Cache 1 \"size\" is now " + cache1.get("size") + ".";
out.set('text', msg);
}, "#demo1_add");
Y.on("click", function(e){
var entry = cache1.retrieve(Y.one("#demo1_retrieveKey").get("value")),
output = entry ? entry.response : "Value not cached.";
out.set('text', output);
}, "#demo1_retrieve");
Y.on("click", function(e){
cache1.flush();
out.set('text', "Cache 1 flushed.");
}, "#demo1_flush");
var cache2 = new Y.CacheOffline({sandbox:"instance2"});
Y.on("click", function(e){
cache2.set("expires", Y.DataType.Number.parse(Y.one("#demo2_expires").get("value")));
out.set('text', "Cache 2 \"expires\" set to " + cache2.get("expires") + ".");
}, "#demo2_setExpires");
Y.on("click", function(e){
cache2.add(Y.one("#demo2_addKey").get("value"), Y.one("#demo2_addValue").get("value"));
var msg = "Value cached. Cache 2 \"size\" is now " + cache2.get("size") + ".";
out.set('text', msg);
}, "#demo2_add");
Y.on("click", function(e){
var entry = cache2.retrieve(Y.one("#demo2_retrieveKey").get("value")),
output = entry ? entry.response : "Value not cached.";
out.set('text', output);
}, "#demo2_retrieve");
Y.on("click", function(e){
cache2.flush();
out.set('text', "Cache 2 flushed.");
}, "#demo2_flush");
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Basic caching functionality with the Cache Utility.">
<a href="cache-basic.html">Basic Caching</a>
</li>
<li data-description="Offline caching implements HTML 5 localStorage when available, to allow data to persist across browser sessions.">
<a href="cache-offline.html">Offline Caching</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
<a href="../datasource/datasource-caching.html">DataSource with Caching</a>
</li>
<li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
<a href="../datasource/datasource-offlinecache.html">DataSource with Offline Cache</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/cache',
name: 'cache-offline',
title: 'Offline Caching',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('cache-basic');
YUI.Env.Tests.examples.push('cache-offline');
YUI.Env.Tests.examples.push('datasource-caching');
YUI.Env.Tests.examples.push('datasource-offlinecache');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>