Cross Browser Cookies with Flash

Problem with regular cookies is that it's specific to a browser, so if save cookies in Firefox (my browser of choice), when I go to Safari non of my preferences are available.

demo

launch this web page in two seperate browsers, and keep them side by side. Next just playing around with the cookie values, and go back and forth between browsers to see that it has the new values. You see if you set the cookie to a value, and click the other browser window you can access the values immediately. Cool !!

• alert(CB_Cookie.get('kookie'))
• CB_Cookie.del('kookie');
• CB_Cookie.set('kookie','daniel')
• CB_Cookie.set('kookie','bulli')

cookie value:

how is it done?

So it dawned on me that Flash stores cookies in a totally different format. It's a local file on your hard drive that is independent of the browser, which means, no matter what the browser ... it accesses the same cookie. I also know that Flash can talk to JavaScript. So why not merge the two???

I quickly whipped up a Flash cookie file with getters and setters. That was a whopping 500 bytes. That's not too shabby. Then a nice JavaScript file that 1.7kilo bytes uncompressed. So approximately to 2kb will give you cross browser cookies.

code break down: actionscript

I created a small 10x10 Flash file and wrote Flash cookie functions.

import flash.external.*;

var so:SharedObject = SharedObject.getLocal("cookies","/");
var oo:Object = new Object;
oo['is_capable'] = true;

if (so.data.is_capable == null)
{
	so.data.is_capable = true;
	so.data.oo = oo;
	so.flush();	
}
else
{
	oo = so.data.oo;
}

This sets up a Flash cookie called "cookies", and Object "oo" for storing all the cookie values. I had to use an object to store cookie values as I couldn't set values with so.data['cookie_key']=cookie_value, but I could do this oo['cookie_key']= cookie_value. The Flash cookie can store Objects fine. Next was a basic test to see if cookie was already set, if not ... then create one set the variables and write to the file immediately with flush() ... otherwise retrieve Object from cookie.

var getFunction:String    		= "f_get_cookie";
var getRealFunction:Function	= get_flash_cookie;

ExternalInterface.addCallback(getFunction, null, getRealFunction);

Next I set up Function name, and a JavaScript function name variables. The Flash function is made available to JavaScript by use of the ExternalInterface.addCallback.

function save_flash_cookie():Void
{
	so.data.oo = oo;
	so.flush();	
}

function delete_flash_cookie(cookie_key:String):Void
{
	if(!cookie_able()) return;
	
	oo[cookie_key] = null;
	delete oo[cookie_key];
	
	save_flash_cookie();
}

function get_flash_cookie(cookie_key):String
{
	if(!cookie_able()) return '';
	
	delete so;
	so = SharedObject.getLocal("cookies","/");
	oo = so.data.oo;

	if (oo[cookie_key] && oo[cookie_key] != undefined) 
	{		
		return oo[cookie_key];
	}

	return '';
}

function set_flash_cookie(cookie_key:String,cookie_val:String):Void
{
	if(!cookie_able()) return;	
	
	delete so;
	so = SharedObject.getLocal("cookies","/");
	oo = so.data.oo;
	
	oo[cookie_key] = cookie_val; 	
	save_flash_cookie();
}

ExternalInterface.call('flash_ready',null);  

I then wrote a getter, a setter, and a delete. To set the value, I used the Object to store data oo[cookie_key] = cookie_val; and write it to the cookie file so.data.oo = oo; so.flush();. Before I get OR set you notice that I deleted the cookie and regot it. Basically when browsers were side by side, I couldn't force it to reread the cookie to see if value was different.

As a final step I call a Javascript function via ExternalInterface.call to tell JavaScript the flash file is ready. I tried using DOM and onload, but none of those seem to be reliable and were very buggy.

code break down: javascript

I only going to explain this briefly. I suggest you download the source to see all the functions.

var cookie_id  = 'CBCookie';

get_movie: function()
{
	if (navigator.appName.indexOf("Microsoft") != -1)
	{
		this.flash_cookie = window[this.cookie_id];
	}
	else
	{
		this.flash_cookie =  document[this.cookie_id];
	}

	return ((this.flash_cookie) ? true : false);
}

This method to grab a reference to the movie I cribbed from the genius moock. Maybe you can use getDocumentById

set: function(key,val)
{
	this.flash_cookie.f_set_cookie(key,val);
}

Lastly, we call the the Flash function using the name we specified in ActionScript using ExternalInterface.addCallback.

code break down: html

You have a basic object/embed, but to test locally and I pulled a few hairs on this one is to use allowScriptAccess and set the value to always

final notes

This was done very quickly and there is room for improvement. I am curious what real world application there are. Is it a viable thing to worry about cookies cross browser. Here are some things that I would add to it if I get time:

• load swf from javascript to put less "stress" on developer
• default to regular cookies if flash cookies fail

I am uncertain what the real world use of this, seems like there could be quite a few.

source

CB_Cookie.zip