웹 저장소 API 및 자바 스크립트 - 정의되지 않은 오류

Question

이 API를 사용하여 저장하려면 html 페이지에서 스타일을 변경하려고했습니다. Im 이것에 아주 새로운 그래서 나는 정확하게 문제가 인 무엇 확실하지 않다. 스타일을 변경하면 메뉴 항목을 선택할 때 작동하지만 창을 새로 고치거나 닫으면 저장하지 않습니다.

편집 : 나는 그들을 저장하려고 시도하지 않고 대신 마지막 스타일을 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을해야합니다 세 가지 다른 스타일을 선택하지 마십시오. 항목을 제거하지 않으므로 마지막으로 선택한 스타일을 결정하는 데 도움이되는 방법을 알기가 어렵습니다. `않습니다;

정확하게 당신이 어떻게 생각하십니까

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

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