Question

我的Cookie有问题。我正在尝试存储在Cookie中选择的选项。但我不明白为什么我的例子不起作用。

例如，不记住字体大小。这是我第一次使用jQuery.cookie。

HTML（在第一个选择中，用于更改背景的选项内容图像）：

<h3>Seleccione un fondo de imagen</h3>
<select name="foo" id="foo" size="2">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
    <option value="4"></option>
    <option value="5"></option>
    <option value="6"></option>
</select>
<input type="button" id="button1" value="Establecer fondo" />

<h3>Seleccione una fuente</h3>
<select name="fuente" id="fuente" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">Arial</option>
    <option value="2">Tahoma</option>
    <option value="3">Verdana</option>
</select>
<input type="button" id="button2" value="Establecer fuente" />

<h3>Seleccione un tama&ntilde;o de fuente</h3>
<select name="fuentesize" id="fuentesize" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">8</option>
    <option value="2">10</option>
    <option value="3">12</option>
    <option value="4">14</option>
</select>
<input type="button" id="button3" value="Establecer tama&ntilde;o de fuente" />

<h3>Seleccione un color de fuente</h3>
<select name="fuentecolor" id="fuentecolor" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">rojo</option>
    <option value="2">azul</option>
    <option value="3">verde</option>
    <option value="4">rosa</option>
</select>
<input type="button" id="button4" value="Establecer color de fuente" />

<h3>Seleccione un estilo para la fuente</h3>
<select name="fuentestilo" id="fuentestilo" size="2" style='-moz-border-radius: 8px;'>
    <option value="1">cursiva</option>
    <option value="2">subrayado</option>
    <option value="3">sin subrayado</option>
</select>
<input type="button" id="button5" value="Establecer estilo de fuente" />

的JavaScript

$(document).ready(function() {
    var value;
    value = $.cookie("cookieFondo");
    if (value) {
        $("#foo").val(value);
    }
    value = $.cookie("cookieFuente");
    if (value) {
        $("#fuente").val(value);
    }
    var value;
    value = $.cookie("cookieFuenteSize");
    if (value) {
        $("#fuentesize").val(value);
    }
    value = $.cookie("cookieFuenteColor");
    if (value) {
        $("#fuentecolor").val(value);
    }
    value = $.cookie("cookieFuentEstilo");
    if (value) {
        $("#fuentestilo").val(value);
    }


    $('#button1').click(function() {
        //alert($('#foo option:selected').text());
        var bg = $('#foo').val();
        if(bg==1){
            $('body').css('background-image', 'url(img/bg00.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==2){
            $('body').css('background-image', 'url(img/bg01.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==3){
            $('body').css('background-image', 'url(img/bg02.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==4){
            $('body').css('background-image', 'url(img/bg03.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==5){
            $('body').css('background-image', 'url(img/bg04.png)');
            $.cookie("cookieFondo", bg);
        }
        if(bg==6){
            $('body').css('background-image', 'url(img/bg05.png)');
            $.cookie("cookieFondo", bg);
        }
    });


    $('#button2').click(function() {
        //alert($('#foo option:selected').text());
       var font = $('#fuente').val();
           if(font==1){
            $('body').css('font-family', 'Arial');
            $.cookie("cookieFuente", font);
        }
        if(font==2){
            $('body').css('font-family', 'Tahoma');
            $.cookie("cookieFuente", font);
        }
        if(font==3){
            $('body').css('font-family', 'Verdana');
            $.cookie("cookieFuente", font);
        }
    });

    $('#button3').click(function() {
        //alert($('#foo option:selected').text());
       var fontsize = $('#fuentesize').val();
           if(fontsize==1){
            $('body').css('font-size', 8);
            $.cookie("cookieFuenteSize", fontsize);
        }
        if(fontsize==2){
            $('body').css('font-size', 10);
            $.cookie("cookieFuenteSize", fontsize);
        }
        if(fontsize==3){
            $('body').css('font-size', 12);
            $.cookie("cookieFuenteSize", fontsize);
        }
        if(fontsize==4){
            $('body').css('font-size', 14);
            $.cookie("cookieFuenteSize", fontsize);
        }
    });

    $('#button4').click(function() {
        //alert($('#foo option:selected').text());
       var fontcolor = $('#fuentecolor').val();
           if(fontcolor==1){
            $('body').css('color', 'red');
            $.cookie("cookieFuenteColor", fontcolor);
        }
        if(fontcolor==2){
            $('body').css('color', 'blue');
            $.cookie("cookieFuenteColor", fontcolor);
        }
        if(fontcolor==3){
            $('body').css('color', 'green');
            $.cookie("cookieFuenteColor", fontcolor);
        }
        if(fontcolor==4){
            $('body').css('color', 'pink');
            $.cookie("cookieFuenteColor", fontcolor);
        }
    });

    $('#button5').click(function() {
        //alert($('#foo option:selected').text());
       var fontstyle = $('#fuentestilo').val();
           if(fontstyle==1){
            $('body').css('font-style', 'italic');
            $.cookie("cookieFuentEstilo", fontstyle);
        }
        if(fontstyle==2){
            $('body').css('text-decoration', 'underline');
            $.cookie("cookieFuentEstilo", fontstyle);
        }
        if(fontstyle==3){
            $('body').css('text-decoration' , 'none');
            $.cookie("cookieFuentEstilo", fontstyle);
        }
    });
});

Answer 1

您正在将值保存到Cookie中，但是当页面加载时，您不会读取Cookie以从Cookie中存储的值初始化页面状态。

你需要做这样的事情：

$(document).ready(function() {
    var value;
    value = $.cookie("cookieFondo");
    if (value) {
         $("#foo").val(value);
    }
    value = $.cookie("cookieFuente");
    if (value) {
         $("#fuente").val(value);
    }
    // ... more here
});

或者使用表格的更多DRY版本将是这样的：

$(document).ready(function() {
    var value;
    var items = [
        "cookieFondo", "#foo",
        "cookieFuente", "#fuente"
        // list more items here
    ];
    for (var i = 0; i < items.length; i+=2) {
        value = $.cookie(items[i]);
        if (value) {
            $(items[i+1]).val(value);
        }
    }
});

jQuery cookie，当我按F5时，我无法看到所选的选项

的JavaScript

1 个答案: