Example: Offline Caching

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();
});

Complete Example Source

<style>
/* 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>