It's Pronounced "Pah-vert." You povert.


I’ve been making plenty of use of localStorage in javascript apps lately.  It’s a very simple way of storing data in the browser that can persist across sessions.  If you want to learn more about it, check out the Local Storage chapter in the excellent Dive into HTML5 web site / future book.

Anyway, I’m using it on a new version of flappingcrane.com to get around the downside to a recent security fix in Safari.  I wanted to have the icons for skits that have already been watched by the user to be translucent.  That’s normally a very easy thing to do using CSS:

.skitIcon a:visited {
opacity: 0.5;
-moz-opacity: 0.5;

However, there’s kind of a clever security problem with this.  In a nutshell, I can list a bunch of links on a page and give some CSS property to visited links.  Then if you visit the page, a script can examine those links and see which ones have those properties, thus telling me which of those sites you have visited.

A recent version of Safari disabled styling on the :visited pseudo-element for this very reason.

Anyway, this is less of a concern on something like Flapping Crane.  We can track what skits you watch, how much of them you watch, how often you pause them, etc.  While that might creep some people out (we only track hits or plays, but I’m sure many, many video sites track a lot more), there’s no serious security issue with that.  I can tell that you’ve watched “Bugles” 145 times (weirdo), but I can’t tell what other creepy web sites you visit.

So, while we can keep track of what client IP has watched what, there are a variety of reasons why I really don’t want to do that in order to style a few links.  One, I like to keep DB interactions to a minimum (hah).  Two, it makes for some clunky, ugly interactions that seem like overkill for a little opacity effect.

I’m sure you can see where I’m going with this.

When you watch a skit (again, on the new site I’m working on), if your browser supports localStorage, it’ll record that you’ve watched it.  Since it’s stored in your browser, there’s no need for querying the database.  Then, when listing out the skit icons, ones that have been viewed get a “watched” class.  Any CSS I want can be applied to that.

This is nothing that couldn’t be accomplished by a variety of other means, but it is nice to have such a remarkably simple way of doing it.  I haven’t decided if I’m going to put in a way to do it with cookies, which have more limitations.

Tags: , ,

Leave a Reply

Povert is proudly powered by WordPress
Entries (RSS) and Comments (RSS).