20 Feb, 2009
Store login information in cookie using jQuery
Web Development » Snippets, Tutorials » Store login information in cookie using jQuery
HTML code:
<form action="login.php" method="post" id="login">
<fieldset>
<legend>Login</legend>
<label for="username" class="label">Username</label>
<input type="text" name="username" id="username" class="text" maxlength="30" />
<label for="password" class="label">Password</label>
<input type="password" name="password" id="password" class="text" maxlength="30" />
<input type="checkbox" name="remember" id="remember" />
<label for="remember">Remember me</label>
<input type="submit" name="submit" value="Login" />
</fieldset>
</form>
Javascript code:
The first javacript snippet will be used to store username and password into cookie if ‘Remember me’ checkbox is ticked.
The second javacript snippet will be used to populate username and password fields with the details stored in cookie previously.
Uses jQuery library and jQuery cookie plugin.
Store into cookies
if ($('#remember').attr('checked')) {
var username = $('#username').attr("value");
var password = $('#password').attr("value");
// set cookies to expire in 14 days
$.cookie('username', username, { expires: 14 });
$.cookie('password', password, { expires: 14 });
$.cookie('remember', true, { expires: 14 });
} else {
// reset cookies
$.cookie('username', null);
$.cookie('password', null);
$.cookie('remember', null);
}
Read from cookies
var remember = $.cookie('remember');
if ( remember == 'true' ) {
var username = $.cookie('username');
var password = $.cookie('password');
// autofill the fields
$('#username').attr("value", username);
$('#password').attr("value", password);
}
Recommended Books on jQuery
Other similiar posts that you might be interested in:
- Fieldset and Legend bug in IE8
- Check username availability using AJAX and jQuery
- Clear default text in input boxes on click with jQuery
- 10 Examples of Basic Input Validation in Javascript
- 10 Useful jQuery Snippets
- Connecting to mysql from command line (eg: PuTTY, ssh)
- How to customise WordPress Admin Login page
