#

# Example: Offline Caching

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.

###### CacheOffline Instance #1

Data expires after: milliseconds
Key: Value:
Key:

###### CacheOffline Instance #2

Data expires after: milliseconds
Key: Value:
Key:
(cache results here)

    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 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>