我正在使用jQuery mobile并且有一组8个选择的翻转开关，具有开启和关闭值。我需要做的是在用户更改时为localStorage中的每个开关设置值。反过来，我还需要获取存储在localStorage中的值，并在页面加载时相应地设置每个开关。这是我到目前为止所拥有的。它还远未完成！
$(document).bind('pageinit', function() {
function setCats(){
var cats = $('#categories select');
var dealCats = localStorage.getItem("Deal Categories");
}
function changeCats (){
var cats = $('#categories select');
for (var i = 0; i < cats.length; i++) {
var obj = cats[i];
}
$('#categories select').on('change', function(){
localStorage.setItem('Deal Categories', JSON.stringify(obj.id));
});
}
$('#categories').on('pagebeforeshow', function(){
setCats();
});
$('#categories').on('pageshow', function(){
changeCats();
});
});
<div data-role="page" id="categories">
<div data-role="header" data-position="fixed">
<a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">Back</a>
<h1>Categories</h1>
</div><!-- header -->
<div data-role="content">
<ul data-role="listview">
<li>
<div data-role="fieldcontain">
<label for="food">Food & Drink</label>
<select name="food" id="food" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="activity">Activity</label>
<select name="activity" id="activity" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="spa">Spa & Salon</label>
<select name="spa" id="spa" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="fitness">Fitness & Health</label>
<select name="fitness" id="fitness" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="homeauto">Home & Auto</label>
<select name="homeauto" id="homeauto" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="medical">Medical/Dental</label>
<select name="medical" id="medical" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="sports">Sports/Leisure</label>
<select name="sports" id="sports" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="products">Products</label>
<select name="products" id="products" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
</ul>
</div><!-- content -->
</div><!-- categories -->
有人可以帮忙吗？提前谢谢！
答案 0 :(得分：1)
以下是一个有效的例子：http://jsfiddle.net/Gajotres/Dxqr2/
首先，我对您的请求稍作修改。我不想打扰8个不同的存储，没有必要为每个元素创建一个存储。最好只创建一个并将所有内容存储在其中。为此我可以将表单元素包装在表单标记中。不，我们不会提交任何内容，只需要它，以便我们可以轻松解析其内容。 无论存在多少选择元素，此代码都将起作用。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="categories">
<div data-role="header" data-position="fixed">
<a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">Back</a>
<h1>Categories</h1>
</div><!-- header -->
<div data-role="content">
<form id="test-form" data-ajax="false">
<ul data-role="listview">
<li>
<div data-role="fieldcontain">
<label for="food">Food & Drink</label>
<select name="food" id="food" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="activity">Activity</label>
<select name="activity" id="activity" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="spa">Spa & Salon</label>
<select name="spa" id="spa" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="fitness">Fitness & Health</label>
<select name="fitness" id="fitness" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="homeauto">Home & Auto</label>
<select name="homeauto" id="homeauto" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="medical">Medical/Dental</label>
<select name="medical" id="medical" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="sports">Sports/Leisure</label>
<select name="sports" id="sports" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
<li>
<div data-role="fieldcontain">
<label for="products">Products</label>
<select name="products" id="products" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</li>
</ul>
</form>
</div><!-- content -->
</div><!-- categories -->
</body>
</html>
Javascript：
$(document).on('pagebeforecreate', '#categories', function(){
initializeForm();
$(document).off('change', 'select').on('change', 'select', function(){
var fields = $(":input").serializeArray();
storeFormData(JSON.stringify(fields));
});
});
function storeFormData(data) {
localStorage.setItem('formData', data);
}
function initializeForm() {
var formData = localStorage.getItem('formData');
if(formData != null) {
jQuery.each(jQuery.parseJSON(formData), function(i, field){
var select = $('select[name="' + field.name + '"]');
select.find('[value="' + field.value + '"]').attr('selected','selected');
});
}
}
如果你想知道方法滑块（'刷新'）的工作原理，请看看我的另一个答案： jQuery Mobile: Markup Enhancement of dynamically added content