使用本地Web存储API和javascript存储网站样式

Question

我有三个功能会改变我的网页风格。当我刷新或离开页面并回归时，我需要使用本地存储api将这些样式保留在页面上。

这是其中一种风格，例如：

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');   
}

这是我写的试图存储所选风格的内容：

window.addEventListener('load',initiate);
window.addEventListener('beforeunload',newItem);

function initiate(){
    var f1 = document.getElementById('f1');
    var f2 = document.getElementById('f2');
    var f3 = document.getElementById('f3');

    f1.addEventListener('click',newItem(f1));
    f2.addEventListener('click',newItem(f2));
    f3.addEventListener('click',newItem(f3));

    window.addEventListener('storage', storagechange);
    show(id);
}

function newItem(x){
    var id = getElementById(x);
    var style =  id.getAttribute('onclick');
    localStorage.setItem(id,style);
    show(id);
}
function show(){   
    localStorage.getItem(id);
}  

此列表包含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>