我从http://www.developerdrive.com/2013/08/jquery-plugin-for-caching-forms-using-html5-local-storage/获得了此代码。它不仅适用于文本输入，复选框和选项选择，但不适用于单选按钮。我希望能够在页面重新加载期间或当用户意外关闭网页时存储用户以前为单选按钮选择的内容。以下是代码。请帮忙！
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>HTML5 and CSS3 Validation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="page">
<section id="signup">
<header>Sign up to the website!</header>
<form name="signup-form">
<label for="firstname">Firstname:</label>
<input id="firstname" name="firstname" type="text" title="Please enter your firstname" placeholder="Jonny" autofocus required />
<label for="surname">Surname:</label>
<input id="surname" name="surname" type="text" title="Please enter your surname" placeholder="Schnittger" required />
<label for="email">Email:</label>
<input id="email" name="email" type="email" title="Please enter your email address" placeholder="jonny@schnittger.me" required />
<label for="website">Website:</label>
<input id="website" name="website" type="url" title="Please enter the url to your website (optional)" placeholder="http://schnittger.me" />
<label for="password">Password:</label>
<input id="password" name="password" type="password" title="Please enter a password, it must contain at least 1 lowercase and 1 uppercase character and be at least 6 characters in length" pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" placeholder="******" required />
<label for="checkbox">Is this checked?:</label>
<input id="checkbox" name="checkbox" type="checkbox" checked />
<input id="checkbox1" name="checkbox1" type="checkbox" checked />
<label for="gender">Gender</label>
<input name="gender" type="radio" checked="checked">Male
<input name="gender" type="radio" />Female
<label for="checkbox">Is this checked?:</label>
<select id="options" name="options">
<option value="opt-1">Option 1</option>
<option value="opt-2">Option 2</option>
<option value="opt-3">Option 3</option>
<option value="opt-4">Option 4</option>
</select>
<label for="checkbox">Is this checked?:</label>
<select id="gen" name="gend">
<option value="opt-1">Male</option>
<option value="opt-2">Female</option>
</select>
</form>
</section>
</div>
<script>
(function ( $ ) {
$.fn.FormCache = function( options ) {
var settings = $.extend({
}, options );
function on_change(event) {
var input = $(event.target);
var key = input.parents('form:first').attr('name');
var data = JSON.parse(localStorage[key]);
if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') {
data[input.attr('name')] = input.is(':checked');
}else {
data[input.attr('name')] = input.val();
}
localStorage[key] = JSON.stringify(data);
}
return this.each(function() {
var element = $(this);
if(typeof(Storage)!=="undefined"){
var key = element.attr('name');
var data = false;
if(localStorage[key]) {
data = JSON.parse(localStorage[key]);
}
if(!data) {
localStorage[key] = JSON.stringify({});
data = JSON.parse(localStorage[key]);
}
element.find('input, select').change(on_change);
element.find('input, select').each(function(){
if($(this).attr('type') != 'submit') {
var input = $(this);
var value = data[input.attr('name')];
if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') {
if(value) {
input.attr('checked', input.is(':checked'));
} else {
input.removeAttr('checked');
}
} else {
input.val(value);
}
}
});
}
else {
alert('local storage is not available');
}
});
};
}( jQuery ));
$(document).ready(function(){
$('form').FormCache();
});
</script>
</body>
</html>