Storing all necessary data in the URL

10 points by matthaeus ↗ HN
I had this idea a couple of weeks ago that it would be interesting to build web services that rely on storing any data necessary in the URL of the webpage. I thought of a small experiment and ended up building http://giveacolor.com/ There, you can select a color, add a short message and send it to anyone. All data is then stored in the URL which ends up looking something like this:

http://giveacolor.com/view/666666236666363630304861636b6572204e6577732023464636363030

Sure it's not the prettiest link but in return, I have basically no requirements on the server side and no database hassle.

It was pretty interesting to develop, since there's a few limitations that I needed to find workarounds for:

Facebook and Twitter sharing disregard any content in a URL after a hash. I had to write a modRewrite rule that would translate the fake /view/ subdirectory into a # in order to create URLs that could be purely parsed on the client side. An idea I had to discard later anyways for other reasons. In the end, I settled for passing the data as a php parameter.

Apparently, Facebook and Twitter are also pretty picky when it comes to special characters (even percent encoded ones) in the URL that you want to share.

Since I wanted this to be UTF-8 compatible (even more special characters), I ended up hex encoding my relevant data. Nothing much can go wrong with letters and numbers. It's pretty simple to encode/decode hex on the client side and I had the added benefit of masking the content of the url in order not to give away the message. This was actually the first time I successfully got UTF8 vom JavaScript to PHP and back to JavaScript that way (more by luck than by skill though)

Try it and let me know what you think!

5 comments

[ 0.22 ms ] story [ 15.6 ms ] thread
I did something similar with a side project a little while back --

If you pull up http://shadowcraft.mmo-mumble.com/us/cenarion-circle/adrine/ you'll notice that all the state gets pushed onto the URL. This is actually a (very big) JSON data structure, packed into an array (to strip key data) and, where possible, with numbers compressed as base62. The whole thing is then deflated and base64-encoded. In that example up there, I have about 2kb of data compressed into 316 bytes. The URL is a bit ugly, but it means you can pass around the entire state in the URL.