Web存储API和Javascript-未定义错误

我一直在尝试在html页面上进行样式更改，以便使用此API进行存储。我在这方面很新，所以我不确定问题出在哪里。当我选择菜单项时，样式更改会起作用，但是如果我刷新或关闭窗口，它们不会保存

编辑：我不再试图保存它们，而是使用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:

样式1
样式2
样式3

它们可能会保存，但在

initiate（）

函数中，您不会调用任何函数来设置样式

此外，根据您在本地存储中设置值的方式—每次从菜单中选择样式并关闭窗口时，您将向存储中添加一个项目，下面是用值替换变量的调用：

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

如果在选择了三种不同的样式后执行了三次此操作，则本地存储中将有三个条目，

f1

、

f2

和

f3

。您从未删除任何项目，因此很难看出这将如何帮助您确定上次选择的样式。你应该做的事情更像这样：

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

然后在

initiate（）

中：

---

你认为localStorage.getItem（0）到底是什么是否？我正在尝试获取本地存储的第一个值（函数）？嗯，首先，您只能将字符串存储在localStorage中，其次，在获得字符串后，您不会将其分配给任何对象。您的意思是我应该具有类似Var X=localStorage.key（0）的内容；当然，虽然我对getItem比对key更感兴趣，但实际分配值并使用它做一些事情将是一个良好的开端。我已经编辑了我的帖子，并尝试实现您的建议。我使用了一个警报框来显示我从本地存储中得到的信息，但它给了我一个未定义的警告error@Batman你所做的不是我所建议的。为什么要执行

localStorage.key（）

？你已经知道关键是什么了，根据我上面的例子，它是你用来存储物品的第一个地方。是的，你是对的。当我拆下那条线时，它开始工作了。非常感谢。

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

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

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