100

# cache.js
HTML5 localStorage with timed expiry

## Why?

For ajax or heavy computational stuff that could probably be done once a minute, rather than every time the functions/events are called.

## Browser support

Anything that supports localStorage. You could use a [localStorage polyfill](https://gist.github.com/350433) to use it with older browsers.

For brevity, the browsers that support localStorage are Firefox 3.5, Safari 4, IE8, Chrome 4+

## Usage

Add `cache.js` to your HTML, I've included a closure compressed `cache.min.js` for use online.


When you're in the middle of doing some heavy ajax, you can store the response in cache.

Cache.set('a unique identifier', {foo: 'bar'});

Your key of 'a unique identifier' can now be returned using the `get` method.

Cache.get('a unique identifier');

=> {foo: 'bar'}

It will only be available for 10000ms (the default)

### Getting a non existant key

Cache.get('will be null');
=> null


Of course, you can set the expiry on a per key basis

Cache.set('key', 'value', 5e4); // 50,000 Milliseconds

Or set a global expiry to be used for all caches

Cache.expiry = 5e4 // 50K ms

Pulling it all together, you might do something like this:

var cache = Cache.get("/url");
if(cache) return cache;

$.get("/url", function (response) {
Cache.set("/url", response);
// Do something awesome with your responseText
});

### Optional 'get' function if value is null

Often, you'll want to do something if the value is not cached. Pass a function to the `get` function:

var result = Cache.get('empty key', function(key) {
return 'bacon';
});
// `result` is now 'bacon' since there was no stored value.

For example, you could execute an Ajax call if the local storage is empty. Here's the earlier example with a cleaner style:

return Cache.get("/url", function(key) {
return $.get(key, function (response) {
Cache.set(key, response);
return response;
});
});

## Bugs / Contributions

* [Report a bug](http://github.com/benschwarz/cache.js/issues)
* To contribute, or send an idea wither github message me or fork the project.
* If you're changing functionality, please perouse the `test/` directory first.
* You can run the tests on a Mac by running `rake test`, otherwise, just open suite.html in a browser

## Build

If you're on a mac, run `rake build`—You'll need the google closure compiler installed, but it will package `cache.js` into `cache.min.js`. Then it'll automagically make a commit describing what you've done. Magic.



## Hall of fame
These contributors will be upheld in the record books as those of fine character and dignity. Eternal greatness ensues.

* [Geoffrey Grosenbach](http://github.com/topfunky)
* [Dmitry Baranovskiy](http://dmitry.baranovskiy.com)

By default web browsers should cache content over HTTPS the same as over HTTP, unless explicitly told otherwise via the HTTP Headers received.

This link is a good introduction to setting cache setting in HTTP headers.

is there anyway to tell them it's ok to cache?

This can be achieved by setting the max-age value in the Cache-Control header to a non-zero value, e.g.

Cache-Control: max-age=3600
will tell the browser that this page can be cached for 3600 seconds (1 hour)

Apparently, there are only two hard problems in computer science: cache invalidation and the naming of things (or so Phil Karlton’s dictum goes). Earlier this month, we invited representatives of Twitter, Facebook, SproutCore, Palm’s webOS, Microsoft’s “Office On The Web”, Yahoo, and Google to talk to us about the former problem (amongst other things), though we also learned something about the latter.

Caching is an important issue to get right on the web, not least of all because of the proliferation of web applications on mobile devices. The goals of our caching summit were to identify use cases that would help us move forward with caching and with HTTP request efficiency. How desirable was rolling up our sleeves to look at HTTP/1.1 Pipelining in Firefox, for instance? What else was needed at the HTTP layer? And was the vaunted HTML5 AppCache, implemented in Firefox 3.5 onwards, actually useful to developers? What else needed to be exposed to web applications, either within content or via additional headers?

Developer feedback is invaluable, and is increasingly the basis of how we want to evolve the next integral pieces of the web platform. Web developers are one of our primary constituencies; going forward, we want them to help us prioritize what we should implement, and what we need to focus on with respect to web standards. We chose our attendees wisely; if any group of people could talk about web applications at scale, the current performance of the cache, and their wishlist for future browser caching behavior on the web platform, it was this group of people. And the feedback they gave us was copious and useful — our work is cut-out for us. Notably, we’ve got a few actions we’re going to follow-up on:

Recently Google launched their latest mobile version of Gmail optimised for iPhone and Android based browsers. One of the features that stood out was the offline access thanks to the browsers support of html5 application cache.

Documentation on the application cache feature supported in safari iPhone 2.1+ is scarce and of that documentation it doesn’t go into great detail. The best place to learn about this is on the Safari DevCenter under the mobile section, there it has 2 documents introducing the user to offline webapps; the first is a quick rundown on just the manifest file and the second article touches on a few more features available to offline webapps such as the javascript events for updating the cache when the user is online. We’ll delve into these later in the article but first let’s take a look at a working example.
View a live demo Download the source files
Update: Added additional information about the event summary and the order in which events get executed. Added link to useful tool for sniffing file Content-Types.

To see the offline webapp in action, load the demo on your iPhone, then turn Airplane Mode on, re-open Safari and reload the demo. This time it will fetch the files from the cache that was created on the initial load.

// This is the conclusion to my tests of determining the best way to cache images.
// I used apache access logs to determine when an image was actually requested from the web server.


// The following code, although not that elegant, works fine in IE6, IE7, IE8, FF3, Safari, Chrome, Opera

var _cacheImages = [];

function cacheImages(images){

$.each(images, function(index, val){

var image = new Image()
image.src = val;

_cacheImages.push( image );
});
};

// The following will NOT work in IE6:
function cacheImages(images){

$.each(images, function(index, val){

var image = new Image()
image.src = val;
});
};

// Also the following will NOT work in IE6 (sorry!)
function cacheImages(images){

$.each(images, function(index, val){

new Image().src = val;
});
};

// It seems you need to save a reference to the image object in order for IE6 to send a request to retrieve it

Just when you thought you’d seen all the cool features of HTML5, I’m here to bring you yet another one. The internet is no longer about just websites; it’s about web applications. Often, our users are on portable or mobile devices, and they won’t always have access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.

Codex

Codex tools: Log in
Transients API
Contents
[hide]

* 1 Function Reference
* 2 Using Transients
o 2.1 Saving Transients with set_transient()
o 2.2 Fetching Transients with get_transient()
o 2.3 Removing Saved Transients with delete_transient()
* 3 Complete Example

This page contains the technical documentation of the WordPress Transients API, which offers a simple and standardized way of storing cached data in the database temporarily by giving it a custom name and a timeframe after which it will expire and deleted.

The transients API is very similar to the Options API but with the added feature of an expiration time, which simplifies the process of using the wp_options database table to store cached information.

Also of note is that Transients are inherently sped up by caching plugins, where normal options are not. A memcached plugin, for example, would make WordPress store transient values in fast memory instead of in the database. For this reason, transients should be used to store any data that is expected to expire, or which can expire at any time. Transients should also never be assumed to be in the database, since they may not be stored there at all.

The intended audience for this article includes WordPress theme authors, plug-in authors and anyone who needs to cache specific data but wants it to be refreshed within a given timeframe. This document assumes a basic understanding of PHP scripting.

An extremely lightweight PHP framework. It includes caching, session, database, form validation, twitter, oauth and asynchronous/non-blocking curl components.

This article shows 2 awesome ways to implement caching on your website using Apache .htaccess (httpd.conf) files on the Apache Web Server. Both methods are extremely simple to set up and will dramatically speed up your site!

CodeIgniter Cache library is a partial caching library for CodeIgniter. It allows you to write and get chunks of data to and from the filesystem. By storing complex or large chunks of data in serialized form on the file system you can relieve stress from the database or simply cache calls to third-party data sources like Twitter.

It’s very important to speed up your web sites so you don’t loose the users.

That being said, many tasks in the checklists from Yahoo or Google are quite complex and are hard to grasp for people who didn’t work all their life configuring Apache or digging deep into the depths of HTTP.

To help this, I created a drop-in .htaccess file that will enable gzipping and long term expiration (helping with unique URLs for your assets).