Saving a moved item - jquery-ui

Question

When I use a move item from a selection list to another list using jQuery it moves well but when I reload the page it goes back to the previous list. I want to know how can I save it so when I reload the page it doesn't go back?
<script>
$(document).ready(function () {
$('#btnRight').click(function (e) {
var selectedOpts = $('#lstBox1 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
$('#btnLeft').click(function (e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox1').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
$('#btnRight2').click(function (e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox3').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
$('#btnLeft2').click(function (e) {
var selectedOpts = $('#lstBox3 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
});
</script>
#foreach (var item in Model)
{
<hr />
<table>
<tr>
<td style='width:160px;'>
<b>TO DO:</b><br />
<select multiple="multiple" id='lstBox1'>
<option>#Html.DisplayFor(model => item.Events.Vanue)</option>
</select>
</td>
<td style='width:50px;text-align:center;vertical-align:middle;'>
<input type="button" id="btnRight" value="-" />
<br /><input type="button" id="btnLeft" value="<" />
</td>
<td style='width:200px;'>
<b>IN PROGRESS: </b><br />
<select multiple="multiple" id='lstBox2'>
</select>
</td>
<td style='width:50px;text-align:center;vertical-align:middle;'>
<input type="button" id="btnRight2" value="-" />
<br /><input type="button" id="btnLeft2" value="<" />
</td>
<td style='width:160px;'>
<b>DONE: </b><br />
<select multiple="multiple" id='lstBox3'>
</select>
</td>
</tr>
</table>

Answer 1

You need to find a way to save the website's state. There are a lot of options. You can start with this article on localStorage. I found it be a good primer.