[новый вася]

Ребята помогите пожалуйста, при перезагрузке страницы слетает цвет селекта в дефолт вот код

<style>
.n {
    font-weight:bold;
    font-size:18px;
    background:#E19D9D; color: #5E5E5E;
    border: 0px;
    padding: 10px;
    -webkit-appearance: none;appearance: none;-moz-appearance: none;
}
.y {
    font-weight:bold;
    font-size:18px;
    background:#9DE1A0; color: #5E5E5E;
    border: 0px;
    padding: 10px;
    -webkit-appearance: none;appearance: none;-moz-appearance: none;
}
</style>
<table>
<tbody>
<tr>
<td style="width: 5px; text-align: center;">
<select class="n" onclick="className=selectedIndex?'y':'n';" id="fruit">
    <option class="n" value="0">Ожидание</option>
    <option class="y" value="1">Отправлен</option>
</select></td>
<td style="width: 50px; text-align: center;">Ячейка №1</td>
<td style="width: 50px; text-align: center;">Ячейка №2</td>
<td style="width: 50px; text-align: center;">Ячейка №3</td>
</tr>
</tbody>
</table>
<script>
document.getElementById("fruit").onchange = function(ter) {
    localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit')) {
    document.getElementById("fruit").options[localStorage.getItem('fruit')].selected = true;
}
</script>

кто может ткните меня носом что не так уже два часа как пытаюсь
простите в js еще новичек
если есть у кого идея более простой реализации этого момента с радостью выслушаю