Почему переменная не записывается в LS?

Есть код:

<script>
        var colorPicker = document.getElementById("bgcolor");
        var retObj = JSON.parse(localStorage.getItem("object"))
        function SaveFon() {
                localStorage.setItem("object", fon)                                     
                localStorage.setItem("object2", colorVal)
            }               
        function changebodycolor(){
            colorVal = colorPicker.value;
            document.body.style.background = colorVal;
            fon = 3;
            SaveFon();  
        }                   
        colorPicker.addEventListener("change",
        changebodycolor,false);
    </script>

И условие:

var retObj = JSON.parse(localStorage.getItem("object"))
var colorVal = JSON.parse(localStorage.getItem("object2"))
 if (retObj == "2") {
    document.body.classList.add('winter');
} else if (retObj == "3") {
    document.body.style.background = colorVal;
} else if (retObj == "4") { }

Т.е. если фоном выбрана картинка (в коде нет, это на др странице), то переменной присваивается значение "2", далее эта переменная записывается в LS и вынимается в файле JS, который Вы видите. Всё работает с этой переменной отлично и таким образом меняя фон на одной странице он меняется на всех даже если пользователь покинет сайт и вернется потом - благодаря LS. Но есть небольшая проблема с установкой цвета фона. Реализацию Вы видите выше. Я сохраняю переменную colorVal и вынимаю в файле JS, где использую вот так:

 document.body.style.background = colorVal;

Но, увы, фон не сохраняется. Почему? Переменная такого типа не может запомнится в LS или я что-то делаю не так? Кстати, условие выполняется, т.е. переменная retObj равна "3", это я проверял. Дело именно в colorVal.