I’m working on a project that has a legitimate (non-spammy) reason to need cross-domain cookies, and we settled on flash as a good way to accomplish this.

However, I was surprisingly unable to find any complete library or how-to guide for connecting flash cookies to javascript. So I dusted off my flash skills and built one, and decided to share with you the fruits of my labors:

Download the .swf, .js, and source code from github

This is an .swf file that communicates with JavaScript via flash’s ExternalInerface to read and write to a Local SharedObject (LSO). Essentially, it’s cross-domain cookies for javascript.

It also includes an (optional) javascript library that handles embedding, error checking, and logging.

The project is hosted at github: http://github.com/nfriedly/Javascript-Flash-Cookies

---

Note: if you’re looking for more information about how Facebook does it, see my next blog post: How Facebook Sets and uses cross-Domain cookies

---

Working Example

See http://nfriedly.com/stuff/swfstore-example/ and http://nfriedly.github.com/Javascript-Flash-Cookies/ for a working example.

Quick start guide

To use the library, upload the storage.swf & swfstore.js files to your web server and put this HTML and JavaScript into your web page(s):

The HTML

<!-- this example uses jquery, but SwfStore does not require jquery to work. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="/PATH/TO/swfstore.js"></script>

<p><input id="dataInput" value="" /> <input type="submit" id="saveBtn" value="Save" /> <span id="status"></span></p>

And The JavaScript

// wait until the page has finished loading before starting
$(function(){

	// first disable things while the swfStore is initializing
	$('input').attr("disabled","disabled");
	$('#status').text('Loading...');

	var mySwfStore = new SwfStore({

		namespace: 'example', // the this must match all other instances that want to share cookies

		swf_url: '/PATH/TO/storage.swf', // to work cross-domain, use the same absolute url on both pages (meaning http://site.com/path/to/store.swf not just /path/to/store.swf)

		debug: true, 

		onready: function(){
			// now that the swfStore was loaded successfully, re-enable everything
			$('input').removeAttr("disabled");
			$('#status').text('Loaded');

			// read the existing value (if any)
			$('#dataInput').val(mySwfStore.get('myValue'));

			// set up an onclick handler to save the text to the swfStore whenever the Save button is clicked
			$('#saveBtn').click(function(){
				mySwfStore.set('myValue', $('#dataInput').val() );
				$('#status').text('Saved!')
			});
		},

		onerror: function(){
			// in case we had an error. (The most common cause is that the user disabled flash cookies.)
			$('#status').text('Error');
		}
	});
});

Cross-domain usage

A copy of storage.swf located on one domain may be embedded on pages from one or more other domains, allowing cross-domain cookie access.

Troubleshooting

• Be sure the urls to the .swf file and .js file are both correct.
• If the .swf file is unable to communicate, it will display log messages on the flash object. If debug is enabled, this this should be visible on the page.
• Alternatively, if you want to hide the flash object, set debug to false.
• If the user does not have flash installed, the onerror function will be called after a (configurable) 60 second timeout. You may want to use a library such as Flash Detect to check for this more quickly.
• If you pass a non-string data as the key or value, things may break. Your best bet is to use strings and/or use JSON to encode objects as strings.

Patches

My Flash / ActionScript skills leave something to be desired, and patches are more than welcome at  github (prefered), or just leave a comment here if you’re not sure how to use github.