8bitOrange

Yes…another nerd post

I’m working on a project at work that is trying to mirror a desktop application as much as possible. Enter HTML5, CSS2, and a whole heaping helping of jQuery (a personal fave). I won’t lie, I’m not a hardcore javascript guy, some of this may come off as basic to some, but I extremely enjoy jQuery’s method of object input and tracking because it makes a very CSS familiar guy like me feel comfortable and happy. I’ve read the speed tests and seen that jQuery sometimes may fall behind loading to prototype or others, but for ease of use, I would maintain that it can’t be beat.

Enter current project. We are trying to make something that will be very, very easy for non tech people to log in to and manage their accounts (which include a large amount of varied media). One of my goals was to make it seamless for a user who, for whatever reason, closes the browser they are in or goes to a different page and comes back, I want to be able to take them back where they were without to much hassle. I looked at some built in jQuery solutions, which didn’t seem to match up, as well as handling it on the server-side with cookies or sessions, which honestly was clunky, and just not the right solution. Enter sessionStorage. This handy javascript, browser side, data storage object is supported across all browsers (with the exception of Chrome, who knows why, since webkit and safari seem to support it). This allows you to store session data on the browser end and barring a full browser crash on the mozilla side, allow a user to retain what you store for them in their local file system, incredibly fast, server light and honestly just fantastic. I may be wrong about this, but I believe this was created by microsoft and is one of those things that has been supported by ie for a ridiculously long time, but enter the rush of javascript heavy apps and needs should be met, and well, now you have sessionStorage with multi-browser support. So onto my super simple easy example of how I used it.

	
	$(document).ready(function(){
		
		//For initial load set current item to first item in list
		var current_item = $("aside > nav > a.first").attr("href");
		
		//check if there was a previous loaded item and load that item.
		
		if(sessionStorage.current_item){
			current_item = sessionStorage.current_item;
		} else {
			sessionStorage.current_item = current_item;
		}
		
				
		$("#content").load(current_item);
		
		//handle the click event on sidebar nav
		$("aside > nav > a").click(function(){
			current_item = $(this).attr("href");
			sessionStorage.current_item = current_item;
			$("#content").load(current_item);
			
			return false;
		});
		
	});

So what’s going on here? Not to hard, I have a nav bar that is being tracked by the class “on” as to which item is active.

1. Upon first load of page it is setting a variable “current_item” that is equal to the first item in the list (which is on). 
2. It is then checking the sessionStorage object to see if I previously set, if it is, then set the “current_item” to the object found in the session, if not then set the session object to the first item. (I can safely assume if no session data is sent, that I would just follow the first item in the list, since it should be on the first  time the page loaded).
3. Then it uses the built in jQuery method of load which will load a page that is called (in this case I am loading the link in the nav)
4. Finally, I need to handle the case if someone clicks a link. Essentially when someone clicks a link in the nav, it will set the session item to the clicked links url and then load the page via jQuery’s handy “load” method.

And that’s it. Not to many painful lines and yet I’ve done something very handy. Stored and tracked what a user has clicked on and insured them that if they click away or exit this page in anyway, they can get back to exactly where they were with no effort on their part. Eventually this will be used to store some form data in case of accidental page closure and we will be helping a user to keep from getting frustrated, hope this helped.