Hash Cookie

An example of Hash.Cookie usage - this demo will store a cookie called HashCookieDemo

/* An example of abstract Object */
var boxStyles = new Abstract({
	red: {
		'background': '#EF687A',
		'border-top': '1px solid #FF8FA9',
		'border-left': '1px solid #FF8FA9',
		'border-right': '1px solid #CF4061',
		'border-bottom': '1px solid #CF4061'
	},
 
	green: {
		'background': '#5ADF53',
		'border-top': '1px solid #95FF8F',
		'border-left': '1px solid #95FF8F',
		'border-right': '1px solid #48CF40',
		'border-bottom': '1px solid #48CF40'
	},
 
	blue: {
		'background': '#68B2EF',
		'border-top': '1px solid #8FCDFF',
		'border-left': '1px solid #8FCDFF',
		'border-right': '1px solid #408FCF',
		'border-bottom': '1px solid #408FCF'
	}
})
 
var box = $('box'), color = $('color'), coordsX = $('coordsX'), coordsY = $('coordsY');
 
/* Settings to be stored in Cookies */
var settings = {
	coords: {"x": 0, "y": 0},
	selected: 2
}
 
/* Initialize of Hash.Cookie */
var HashCookie = new Hash.Cookie('HashCookieDemo');
 
/* Draggable Box */
/*	It's limited to 'out_box' container, when dragged it stores in settings object it's coordinates */
box.makeDraggable({
	container: 'out_box',
	onDrag: function() {
		var pos = {"x": this.element.getStyle('left').toInt() + 1, "y": this.element.getStyle('top').toInt() + 1};
		settings['coords'] = pos;
		coordsX.setHTML(settings['coords'].x);
		coordsY.setHTML(settings['coords'].y);
	}
});
 
/* Select menu: */
/* 	It changes box colors and store the choosen one on settings object. */
color.addEvent('change', function() {
	box.setStyles(boxStyles[this.getValue()]);
	settings['selected'] = color.selectedIndex;
});
 
/* Save button: */
/* 	Simply saves cookies. */
$('save').addEvent('click', function() {
	HashCookie.extend(settings);
});
 
/* Clear button: */
/* 	Will remove your saved cookie. */
$('clear').addEvent('click', function() {
	HashCookie.empty();
});
 
/* Load button: */
/* 	Loads cookies only if they exists. */
$('load').addEvent('click', function() {
	if (HashCookie.get('coords')) {
		settings['coords'] = HashCookie.get('coords');
		settings['selected'] = HashCookie.get('selected');
	} else {
		settings['coords'] = {"x": 0, "y": 0};
		settings['selected'] = 2;
	}
 
	coordsX.setHTML(settings['coords'].x);
	coordsY.setHTML(settings['coords'].y);
	color.options[settings['selected']].selected = true;
 
	var loadStyles = $merge(boxStyles[color.getValue()], settings);
	loadStyles['left'] = loadStyles.coords.x - 1; loadStyles['top'] = loadStyles.coords.y - 1;
	delete loadStyles.coords;
 
	box.setStyles(loadStyles);
});
 
/* Let's simulate we have clicked on 'load' button */
$('load').fireEvent('click');
<h3>Hash.Cookie</h3>
<div id="topbar">Drag the box around, change its color and click 'save' to store settings in Cookie as Object, then refresh the page to automatically load your Cookie settings or just click 'load'. 'clear' will remove them.</div>
<div id="out_box">
	<div id="box"></div>
</div>
<div id="bottombar">
	left: <span id="coordsX"></span>px, top: <span id="coordsY"></span>px
 
	<span class="border">&nbsp;</span>
 
	background color: 
	<select id="color" name="color">
		<option value="red">red</option>
		<option value="green">green</option>
		<option value="blue">blue</option>
	</select>
 
	<span class="border">&nbsp;</span>
 
	<input type="button" name="save" id="save" value="save" />
	<input type="button" name="load" id="load" value="load" />
	<input type="button" name="clear" id="clear" value="clear" />
</div>
 
 
#topbar {
	margin: 5px auto;
	width: 600px;
	border-bottom: 1px solid #B3D4EF;
}
 
#bottombar {
	margin: 0pt auto;
	width: 592px;
	padding: 2px 5px;
	background: #D1E2EF;
}
 
#out_box {
	margin: 0px auto;
	background-color: #efefef;
	border-top: 1px solid #f9f9f9;
	border-left: 1px solid #f9f9f9;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: 600px;
	height: 300px;
}
 
#box {
	width: 50px;
	height: 50px;
	position: relative;
	cursor: move;
	background: #68B2EF;
	border-top: 1px solid #8FCDFF;
	border-left: 1px solid #8FCDFF;
	border-right: 1px solid #408FCF;
	border-bottom: 1px solid #408FCF;
}
 
.border {
	border-right: 2px solid #0F627F;
	width: 1px;
	margin: 0 5px;
}
 
select, input {
	font-size: 10px;
}
 
 

Hash.Cookie

Drag the box around, change its color and click 'save' to store settings in Cookie as Object, then refresh the page to automatically load your Cookie settings or just click 'load'. 'clear' will remove them.
left: px, top: px   background color: