API веб-хранилища и Javascript - Неопределенная ошибка

Question

Я пытаюсь получить изменения стиля на моей странице html, чтобы получить их с помощью этого API. Im довольно новичок в этом, поэтому я не совсем уверен, в чем проблема. Изменения стиля работают, когда я выбираю элемент меню, но если я обновляю или закрываю окно, они не сохраняются.

EDIT: Я отошел от попытки сохранить их, но вместо этого использовал последний стиль, используемый с помощью localStorage, а затем используя переключатель для запуска функции для последнего сохраненного стиля. Однако я получаю неопределенную ошибку при попытке получить последнее сохраненное значение.

Вот 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

Они, вероятно, спасти, но ни в одной точке в вашей initiate() функции вы называете какой-либо из функций, чтобы установить стиль.

Кроме того, с тем, как вы устанавливаете значения в локальном хранилище - каждый раз, когда вы выбираете стиль из меню и закрываете окно, вы добавляете элемент в хранилище, вот вызов с переменными, замененными на значения:

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

Если вы делаете это в три раза отобрав три разных стилей, то вы будете просто иметь три записи в локальном хранилище, f1, f2 и f3. Вы никогда не удаляете какие-либо предметы, поэтому трудно понять, как это поможет вам определить, какой последний выбранный стиль был. То, что вы должны делать что-то больше, как это:

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

Тогда в initiate():

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

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