Change cookies to local storage?

[pxlcreations]

I am working on a web app for the iPad and I am storing all my content in cookies. I am wondering how easy it is to transfer it to Local Storage. I'll post all the scripts that set cookies below:

jQuery.cookie = function (a, b, c) {
	if (typeof b !== "undefined") {
		c = c || {};
		if (b === null) {
			b = "";
			c.expires = -1;
		}
		var d = "";
		if (c.expires && (typeof c.expires === "number" || c.expires.toGMTString)) {
			var e;
			if (typeof c.expires === "number") {
				e = new Date();
				e.setTime(e.getTime() + c.expires * 24 * 60 * 60 * 100000);
			} else {
				e = c.expires;
			}
			d = "; expires=" + e.toUTCString();
		}
		var f = c.path ? "; path=" + c.path : "";
		var g = c.domain ? "; domain=" + c.domain : "";
		var h = c.secure ? "; secure" : "";
		document.cookie = [a, "=", encodeURIComponent(b), d, f, g, h].join("");
	} else {
		var i = null;
		if (document.cookie && document.cookie !== "") {
			var j = document.cookie.split(";");
			for (var k = 0; k < j.length; k++) {
				var l = jQuery.trim(j[k]);
				if (l.substring(0, a.length + 1) === a + "=") {
					i = decodeURIComponent(l.substring(a.length + 1));
					break;
				}
			}
		}
		return i;
	}
}; 

$(window).unload(function () {
	$(".remember").each(function () {
		$.cookie(this.id, this.value, {
			expires: 365
		});
	});
	$(".draggable").each(function () {
		var a = $(this);
		$.cookie(this.id, a.css("top") + "_" + a.css("left"), {
			expires: 365
		});
		$.cookie("disp" + this.id, a.css("display"), {
			expires: 365
		});
	});
});

$(function () {
	var a, b, c;
	setInterval(checkOrientAndLocation, 1000);
	$(".remember").each(function () {
		var a = $.cookie(this.id);
		if (a) {
			this.value = a;
		}
	});
	$(".draggable").each(function () {
		var a = $.cookie(this.id);
		if (a) {
			a = a.split("_");
			$(this).css({
				position: "absolute",
				top: a[0],
				left: a[1]
			});
		}
		var b = $.cookie("disp" + this.id);
		if (b) {
			this.style.display = b;
		}
	}).touch({
		animate: false,
		sticky: false,
		dragx: true,
		dragy: true,
		rotate: false,
		resort: false,
		scale: false
	});
});

function toggle_visibility(a) {
	var item = $("#" + a);
	item.fadeToggle();
	$.cookie("disp" + a, item.css("display"));
} 

var _target = null,
	_dragx = null,
	_dragy = null,
	_rotate = null,
	_resort = null;
var _dragging = false,
	_sizing = false,
	_animate = false;
var _rotating = 0,
	_width = 0,
	_height = 0,
	_left = 0,
	_top = 0,
	_xspeed = 0,
	_yspeed = 0;
var _zindex = 1000;
jQuery.fn.touch = function (a) {
	a = jQuery.extend({
		animate: false,
		sticky: false,
		dragx: true,
		dragy: true,
		rotate: false,
		resort: false,
		scale: false
	}, a);
	var b = [];
	b = $.extend({}, $.fn.touch.defaults, a);
	this.each(function () {
		this.opts = b;
		this.ontouchstart = touchstart;
		this.ontouchend = touchend;
		this.ontouchmove = touchmove;
		this.ongesturestart = gesturestart;
		this.ongesturechange = gesturechange;
		this.ongestureend = gestureend;
	});
};

var currentRotation = null;
function setOrientation() {
	switch (window.orientation) {
	case 0:
		orient = "portrait";
		break;
	case 90:
		orient = "landscape";
		break;
	case -90:
		orient = "landscape";
		break;
	}
	currentRotation = window.orientation;
	document.body.setAttribute("orient", orient);
	setTimeout(scrollTo, 0, 0, 1);
}

function checkOrientAndLocation() {
	if (currentRotation !== window.orientation) {
		setOrientation();
	}
}

function gestureend(a) {
	_sizing = false;
	_rotating = (_rotating + a.rotation) % 360;
}

function gesturechange(a) {
	if (_sizing) {
		_width = this.opts.scale ? Math.min(parseInt(_sizing[0], 8) * a.scale, 300) : _sizing[0];
		_height = this.opts.scale ? Math.min(parseInt(_sizing[1], 10) * a.scale, 300) : _sizing[1];
		_rotate = this.opts.rotate ? "rotate(" + (_rotating + a.rotation) % 360 + "deg)" : "0deg";
		$("#" + this.id).css({
			width: _width + "px",
			height: _height + "px",
			webkitTransform: _rotate
		});
		$("#" + this.id + " b").text("");
		$("#" + this.id).css({
			backgroundColor: ""
		});
	}
}

function gesturestart(a) {
	_sizing = [$("#" + this.id).css("width"), $("#" + this.id).css("height")];
}

function touchend(a) {
	$(a.changedTouches).each(function () {
		if (!a.targetTouches.length) {
			_dragging = false;
			if (_animate) {
				_left = $("#" + _target).css("left") === "auto" ? this.pageX : parseInt($("#" + _target).css("left"), 10);
				_top = $("#" + _target).css("top") === "auto" ? this.pageY : parseInt($("#" + _target).css("top"), 10);
				var b = _dragx ? _left + _xspeed + "px" : _left + "px";
				var c = _dragy ? _top + _yspeed + "px" : _top + "px";
				if (_dragx || _dragy) {
					$("#" + _target).animate({
						left: b,
						top: c
					}, "fast");
				}
			}
		}
	});
	$("#" + _target + " b").text("");
	$("#" + _target).css({
		backgroundColor: ""
	});
}

function touchmove(a) {
	if (_dragging && !_sizing && _animate) {
		var b = isNaN(parseInt($("#" + _target).css("left"), 10)) ? 0 : parseInt($("#" + _target).css("left"), 10);
		var c = isNaN(parseInt($("#" + _target).css("top"), 10)) ? 0 : parseInt($("#" + _target).css("top"), 10);
	}
	$(a.changedTouches).each(function () {
		a.preventDefault();
		_left = this.pageX - parseInt($("#" + _target).css("width"), 10) / 2;
		_top = this.pageY - parseInt($("#" + _target).css("height"), 10) / 2;
		if (_dragging && !_sizing) {
			if (_animate) {
				_xspeed = Math.round((_xspeed + Math.round(_left - b)) / 1.5);
				_yspeed = Math.round((_yspeed + Math.round(_top - c)) / 1.5);
			}
			if (_dragx || _dragy) {
				$("#" + _target).css({
					position: "absolute"
				});
			}
			if (_dragx) {
				$("#" + _target).css({
					left: _left + "px"
				});
			}
			if (_dragy) {
				$("#" + _target).css({
					top: _top + "px"
				});
			}
			if (_dragx || _dragy) {
				$.cookie(_target, ($("#" + _target).css("top") || "") + "_" + ($("#" + _target).css("left") || ""));
			}
			$("#" + _target).css({
				backgroundColor: ""
			});
			$("#" + _target + " b").text("");
		}
	});
}

function touchstart(a) {
	_target = this.id;
	_dragx = this.opts.dragx;
	_dragy = this.opts.dragy;
	_resort = this.opts.resort;
	_animate = this.opts.animate;
	_xspeed = 0;
	_yspeed = 0;
	$(a.changedTouches).each(function () {
		var b = $("#" + _target).css("left") === "auto" ? this.pageX : parseInt($("#" + _target).css("left"), 10);
		var c = $("#" + _target).css("top") === "auto" ? this.pageY : parseInt($("#" + _target).css("top"), 10);
		if (!_dragging && !_sizing) {
			_left = a.pageX - b;
			_top = a.pageY - c;
			_dragging = [_left, _top];
			if (_resort) {
				_zindex = $("#" + _target).css("z-index") === _zindex ? _zindex : _zindex + 1;
				$("#" + _target).css({
					zIndex: _zindex
				});
			}
		}
	});
}

function killAllCookies() {
	$(window).unbind("unload");
	var a = document.cookie.split(";"),
		b = a.length - 1;
	for (b; b > -1; --b) {
		$.cookie(a[b].split("=")[0], "", {
			expires: -1
		});
		setTimeout("location.reload(true);", 1);
	}
}

I realize this is a big thing to ask, so if anyone has some free time and possibly wants to help me, I would be extremely thankful.

[pxlcreations]

Any ideas or articles to look at?