localStorage
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: Flapping Crane, javascript, www