Web Storage API and Javascript - Undefined Error

Question

I've been trying to get style changes on my html page to get stored using this API. Im pretty new at this so im not exactly sure what the problem is. The style changes work when I select the menu item, but if I refresh or close the window, they don't save.

EDIT: I've moved away from trying to get them to save but instead having the last style used stored using localStorage then using a switch to run the function for the last saved style. However i am getting an undefined error when trying to get the last saved value.

Here's the JS:

//Style 1
function style1(){
    var vP = document.getElementById('video_container');
    var bG = document.getElementsByTagName('body');
    var sidebar = document.getElementById('sidebar');
    var banner = document.getElementById('top_header');
    var body = document.getElementById('body_div');

    vP.style.backgroundColor = ('black');
    bG[0].style.background = "url('images/bg/bg1.jpg') no-repeat center center fixed";
    sidebar.style.display = ('block');  
    banner.style.display = ('block'); 
    body.style.marginTop = ('190px');  

    var selectedStyle = "style";
    var value = 's1'; 
    newItem(selectedStyle,value);
}

//Style 2
function style2(){
    var vP = document.getElementById('video_container');
    var bG = document.getElementsByTagName('body');
    var sidebar = document.getElementById('sidebar');
    var banner = document.getElementById('top_header');
    var body = document.getElementById('body_div');

    vP.style.backgroundColor = get_random_color();
    bG[0].style.background = "url('images/bg/bg"+randNum()+".jpg') no-repeat center center fixed";
    sidebar.style.display = ('block');  
    banner.style.display = ('block');  
    body.style.marginTop = ('190px');

    var selectedStyle = 'style'; 
    var value = 's2';
    newItem(selectedStyle,value);
}

//Style 3
function style3(){
    var vP = document.getElementById('video_container');
    var bG = document.getElementsByTagName('body');
    var sidebar = document.getElementById('sidebar');
    var banner = document.getElementById('top_header');
    var body = document.getElementById('body_div');

    vP.style.backgroundColor = get_random_color();
    bG[0].style.background = "url('images/bg/bg"+randNum()+".jpg') no-repeat center center fixed";
    sidebar.style.display = ('none');  
    banner.style.display = ('none'); 
    body.style.marginTop = ('80px');  

    var selectedStyle = 'style'; 
    var value = 's3';
    newItem(selectedStyle,value); 
}


//-------------Web Storage API stuff-------------//
window.addEventListener('load',initiate);

function initiate(){
    window.addEventListener('storage', storagechange);
    show();
}
function newItem(id,style){

    localStorage.setItem(id,style);    
}
function show(){   
    var x = localStorage.key(0);
    var y = localStorage.getItem(x);
    var z=2;
    alert(y); //used to test what value i would get, it says undefined 

    switch (y) {
        case 's3':
            style3();
            break;
        case 's2':
            style2();
            break;
        case 's1':
        default:
            style1();
            break;
    } 

}  

HTML:

<div id="sideMenu" >
    <ul class="bmenu">
        <li id="f1" onclick="style1()">Style 1</li> <!--turn sidebar on/off-->
        <li id='f2' onclick="style2()">Style 2</li> <!--randomize vidcontain border-->
        <li id='f3' onclick="style3()">Style 3</li>
    </ul>
</div> 

Answer 1

They probably do save, but at no point in your initiate() function do you call any of the functions to set the style.

Also, with the way you're setting the values in local storage - every time you select a style from the menu and close the window you're adding an item to the store, here is the call with variables replaced with values:

localStorage.setItem('f3','style3()');

If you do this three times having selected the three different styles then you will simply have three entries in local storage, f1, f2 and f3. You never remove any items, so it's hard to see how this is going to help you determine which the last selected style was. What you should be doing is something more like this:

localStorage.setItem('savedStyle','f3');

Then in initiate():

var savedStyle = localStorage.getItem('savedStyle');

switch (savedStyle) {
    case 'f3':
        style3();
        break;
    case 'f2':
        style2();
        break;
    case 'f1':
    default:
        style1();
        break;
}