Web存儲API和Javascript - 未定義的錯誤

Question

我一直在嘗試在我的html頁面上獲取樣式更改以使用此API進行存儲。我很新，所以我不太確定問題是什麼。當我選擇菜單項時，樣式會改變，但如果我刷新或關閉窗口，它們不會保存。

編輯：我已經搬離試圖讓他們節省，而是有使用的最後一個樣式使用本地存儲，然後使用一個開關來運行上次保存的樣式功能存儲起來。但是，當我嘗試獲取上次保存的值時出現未定義的錯誤。

這裏的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; 
}