Here's a working example: http://jsfiddle.net/Gajotres/Dxqr2/
First, I have made a slight change to your request. I didn't want to bother with 8 different storage's, no point in create a storage for every single element. It is much better to create only one and store everything in it.To made it possible I have wrapped your form elements inside a form tag. No we are not going to submit anything, it is only needed so we can easily parse its content. This code will work no matter how much select elements exist.
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');
});
}
}
One last thing if you want to know how method slider('refresh') work take a look at my other answer: jQuery Mobile: Markup Enhancement of dynamically added content