javascript - ローカルWebストレージAPIとJavaScriptを使用したサイトスタイルの保存

Question

ページスタイルを変更する3つの関数があります。ローカルストレージAPIを使用して、ページを更新または終了してカムバックしたときにこれらのスタイルをページに残しておく必要があります。

これは、たとえば次のスタイルの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');   
}

これは私が選んだスタイルを保存しようとして書いたものです：

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>