0

3 つのボタンを持つ HTML5 ページがあります。これらのボタンは、マイページのさまざまなことを変更します。たとえば、1 つ目は div を非表示にし、2 つ目はビデオ プレーヤーをランダムな色に変更するために使用し、3 つ目はフォルダー内の背景画像を切り替えます。

これは、サイド メニューのボタンがあるページです (一部非表示になっています): http://www3.carleton.ca/clubs/sissa/html5/video.html

私の課題では、ウェブ ストレージ API を使用して、ページを離れて戻ってきたときに変更を保存する必要があります。したがって、ビデオ プレーヤーを赤に変更してウィンドウを閉じると、ウィンドウを開いたときにビデオ プレーヤーは赤のままになります。

これはまったく可能ですか？

これは各ボタンの JS です。

// Side Menu Function 1
function wideScreen(){
    sidebar = document.getElementById('sidebar');
    banner = document.getElementById('top_header'); 
    body = document.getElementById('body_div');

    if(sidebar.style.display != 'none'){
            sidebar.style.display = ('none');
            banner.style.display  = 'none';
            body.style.marginTop = ('80px');
        }else{
            sidebar.style.display = ('block');
            banner.style.display = 'block';
            body.style.marginTop = ('220px');

        }
    }

//Side Menu Function 2
var dfault = false   
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}
function randFrame(){
    vid = document.getElementById("video_container");
    c = document.getElementById('controls');

    if(!dfault){
        vid.style.backgroundColor  = get_random_color();
        c.style.backgroundColor = vid.style.backgroundColor;
        c.style.backgroundImage = 'none'; 

    }else{
        vid.style.backgroundColor = ('black');
        c.style.backgroundImage = "url('images/bg/bg4.jpg')";
        c.style.backgroundColor = 'none';
    }

    dfault = !dfault
}

//Side Menu Function 3
function randNum(){
    num=Math.floor((Math.random()*13)+1); 
    return num;   
}
function randBG(){
    b = document.getElementsByTagName('body');
    b[0].style.background = "url('images/bg/bg"+randNum()+".jpg') no-repeat center center fixed"
}
4

1 に答える 1

1

「localstorage」を読みたいと思うかもしれません。適切なページは次のとおりです。

http://diveintohtml5.info/storage.html

したがって、キー/ペアを作成するか、クリックがあるたびに更新できます。

したがって、それを読むには、次のようにします。

var mystore = localStorage.getItem("sidebar");

そしてそれを設定するには、次のことができます：

localStorage.setItem("red", mystore);

したがって、ロード時にキーを探し、存在する場合は要素を設定し、クリックがあるたびにストレージを作成/更新します。

詳細については、次を参照してください。

http://paperkilledrock.com/2010/05/html5-localstorage-part-one/

于 2013-03-15T01:20:48.053 に答える