Ustawienie klasy 'Active' i reload strony

Witajcie.
Mam pewien problem, mianowicie mam 20 tagów li. Ustawiam w pierwszym z nich class="active". Następnie po kliknięciu w konkretne li zdejmuję active z pierwszego li i ustawiam go na tym klikniętym li. Wszystko fajnie się ustawia ale tylko na chwilę. Po przeładowaniu strony class="active" znika z tego zaznaczonego li. Jak zapisać to na stałe aż do następnego kliknięcia niezależnie od przeładowania strony? Robię to za pomocą jQuery. Mam nadzieję, że zrozumiale to napisałem :) Kod daję poniżej. Z góry dzięki!

 <script> 
$(document).ready(function(){
$("#cat_box ul li" ).click(function() {

  $(this).addClass("active").siblings().removeClass("active");
});
});
</script>

Zapisz w localStorage informacje ktory li jest aktywny, po kliknieciu aktualizuj localStorage, a przy ladowaniu strony sprawdzaj czy jest cos w localStorage, jezeli jest to dodawaj odpowiednia klase aktywnemu elementowi

No tu jednak trzeba użyć cookie, sesji lub po id strony w php :)