Tech Tidbits - Ruby, Ruby On Rails, Merb, .Net, Javascript, jQuery, Ajax, CSS...and other random bits and pieces.

Wednesday, January 23, 2008

jQuery: Cookie Plugin

I've become a big fan of jQuery and have contributed two small plugins myself, so when it came time to switch to a library for cookie manipulation with Javascript (time to replace all that nasty inline JS code) my first choice was jQuery.

Not to be disappointed, I found that Klaus Hartl has written a very slim and useful Cookie Plugin for jQuery.

Here's a small page test using the jQuery Cookie plugin:

<html>
<head>
<title>jquery cookie</title>

<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

<script type="text/javascript">

$(function($) {

function displayMessage(msg) {
$('#message').html(msg).css({color: 'green'});
}

displayMessage('jQuery cookie plugin test');

$('#setSessionCookie').click(function() {
$.cookie('test', 'Hmmm, cookie');
displayMessage("Cookie 'test' has been set.");
});

$('#setCookie').click(function() {
$.cookie('test', 'Hmmm, cookie', { expires: 7 });
displayMessage("Cookie 'test' has been set and will expire in 7 days.");
});

$('#getCookie').click(function() {
displayMessage("The value of the cookie named 'test' is: " + $.cookie('test'));
});

$('#deleteCookie').click(function() {
$.cookie('test', null);
displayMessage("Cookie 'test' has been deleted.");
});

$('#testCookiesEnabled').click(function() {
$.cookie('testcookiesenabled', null);
$.cookie('testcookiesenabled', 'enabled');
if ($.cookie('testcookiesenabled')) {
displayMessage("Cookie: "+ $.cookie('testcookiesenabled'));
} else {
displayMessage("Cookies disabled");
$.cookie('testcookiesenabled', null);
}
});

});

</script>

</head>

<body>

<p><span id="message" style="forecolor: red;"></span>

<p><input type="button" id="testCookiesEnabled" value="Cookies enabled?"/></p>

<p><input type="button" id="setSessionCookie" value="Set session cookie"/></p>

<p><input type="button" id="setCookie" value="Set cookie expires in 7 days"/></p>

<p><input type="button" id="getCookie" value="Show cookie value"/></p>

<p><input type="button" id="deleteCookie" value="Delete the cookie"/></p>

</body>
</html>


My jQuery cookie demo using jquery.cookie.js

No comments:

About Me

My photo
Developer (Ruby on Rails, iOS), musician/composer, Buddhist, HSP, Vegan, Aspie.

Labels