Example: Basic Caching

The Cache Utility provides a basic caching mechanism for storing key/value pairs in local JavaScript memory.

(cache results here)
YUI().use("cache-base", function(Y) {
    // Configure Cache maximum size, expires in the constructor
    var cache = new Y.Cache({max:5, expires:3600000});

    // 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 a request property and a response property
    alert("cached key: " + cachedentry.request +
        "/cached value: " + cachedentry.response);

    // 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="demo">
<fieldset>
    <label for="demo_max">Cache max: <input type="text" id="demo_max" class="short" value="0"> <input type="button" id="demo_setMax" value="Set max"></label>
    <label for="demo_setUniqueKeys">Enforce unique keys: <input type="checkbox" id="demo_setUniqueKeys"></label>
</fieldset>
<fieldset>
    <label for="demo_expires">Data expires after: <input type="text" id="demo_expires" class="med" value="86400000"> milliseconds
    <input type="button" id="demo_setExpires" value="Set expires"></label>
</fieldset>
<fieldset>
    <label for="demo_addKey">Key: <input type="text" id="demo_addKey"></label>
    <label for="demo_addValue">Value: <input type="text" id="demo_addValue"></label>
    <input type="button" id="demo_add" value="Cache value">
</fieldset>
<fieldset>
    <label for="demo_retrieveKey">Key: <input type="text" id="demo_retrieveKey"></label>
    <input type="button" id="demo_retrieve" value="Retrieve value">
</fieldset>
<fieldset>
    <input type="button" id="demo_flush" value="Flush cache"></label>
</fieldset>
</form>
<div id="out">(cache results here)</div>

<script>
YUI().use("node", "datatype-number", "cache-base" ,function (Y) {
var cache = new Y.Cache(),
    out   = Y.one('#out');

Y.on("click", function(e){
    cache.set("max", Y.DataType.Number.parse(Y.one("#demo_max").get("value")));
    out.setHTML("Cache max set to " + cache.get("max") + ".");
}, "#demo_setMax");

Y.on("click", function(e){
    cache.set("uniqueKeys", Y.one("#demo_setUniqueKeys").get("checked"));
    out.setHTML("Cache uniqueKeys set to " + cache.get("uniqueKeys") + ".");
}, "#demo_setUniqueKeys");

Y.on("click", function(e){
    cache.set("expires", Y.DataType.Number.parse(Y.one("#demo_expires").get("value")));
    out.setHTML("Cache \"expires\" set to " + cache.get("expires") + ".");
}, "#demo_setExpires");

Y.on("click", function(e){
    cache.add(Y.one("#demo_addKey").get("value"), Y.one("#demo_addValue").get("value"));
    var msg = cache.get("max") ?
        "Value cached. Cache size is now " + cache.get("size") + "." :
        "Cache max is " + cache.get("max") + ". Value not cached."
    out.setHTML(msg);
}, "#demo_add");

Y.on("click", function(e){
    var entry = cache.retrieve(Y.one("#demo_retrieveKey").get("value")),
        output = entry ? entry.response : "Value not cached.";
    out.setHTML(output);
}, "#demo_retrieve");

Y.on("click", function(e){
    cache.flush();
    out.setHTML("Cache flushed.");
}, "#demo_flush");
});
</script>