Save change to background using localstorage

Question

I'm trying to store the most recent style choice made by a user-click based on a selection list. I have attempted to use localstorage to do so but I'm having a really hard time getting it to work.

Any help would be greatly appreciated. Thanks!

This is the best I could come up with after looking at several examples - but it doesn't work.

function initiate(){
    var styleButton = document.getElementById("selectStyleButton");
    if (styleButton){
        styleButton.addEventListener("click", saveStyle);
    }
    setStyle();
}

function saveStyle(){
    var select = document.getElementById("selectStyle");
    if (select){
        select[select.selectedIndex].value = localStorage.setItem("selectStyle"); //store value that was selected
    }
    setStyle(); //set the style that was selected based on the above
}

function setStyle(){
    var newstyle = localStorage.getItem("selectStyle"); //get value that was selected
    document.body.className = newstyle; //change body based on the class name of value that was selected
    }

window.addEventListener("load", initiate);

Answer 1

What you're attempting to do here is set the value of the selected option not store it in local storage. Try instead

 localStorage.setItem("selectStyle",select[select.selectedIndex].value);

http://diveintohtml5.info/storage.html#methods