+
+
+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.
+
+
+
+
+
+
+
+
+(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>
+
+