0

このAPIを使用して保存するために、HTMLページでスタイルの変更を取得しようとしています。私はこれでかなり新しいので、問題が何であるか正確にはわかりません。メニュー項目を選択するとスタイルの変更は機能しますが、ウィンドウを更新または閉じると保存されません。

編集：私はそれらを保存しようとするのをやめましたが、代わりに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>
4

1 に答える 1

1

それらはおそらく保存しますが、関数のどの時点でinitiate()も、スタイルを設定するために関数を呼び出すことはありません。

また、ローカルストレージに値を設定する方法では、メニューからスタイルを選択してウィンドウを閉じるたびに、ストアにアイテムを追加します。変数を値に置き換えた呼び出しは次のとおりです。

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

3つの異なるスタイルを選択してこれを3回行うと、ローカルストレージに3つのエントリが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;
}
于 2013-03-15T09:18:11.520 に答える