Question

我有一个<select>元素，我想用它来改变我的网页背景。我有成功改变的背景（虽然以一种非常不优雅的方式），我想知道是否有一种简单的方法来“保存”这样，这样每当用户离开并返回到网页时，背景就是他们的选择。

我正在修补cookie和localStorage来实现这一目标，但从来没有任何工作。

HTML：

<select id="settingBackground">
    <option name="default">Default</option>
    <option name="thankshaking">Background 2</option>
</select>

JavaScript的：

$(document).ready(function () {
    $('#settingBackground').on('change', function () {
        if (this.value == "Default") {
            // Change background
            $('body').css("background", "#1e8cd4");
            $('body').css("color", "#fff");
        } else if (this.value == "Background 2") {
            // Change background
            $('body').css("background", "url('http://i.imgur.com/cV7PKqh.jpg') no-repeat center center fixed");
            $('body').css("background-size", "cover");
            $('body').css("color", "#000");
        }
    });
});

Answer 1

这是一个用于设置和读取cookie的Jquery插件。您甚至可以定义到期时间。 https://github.com/carhartl/jquery-cookie

要从select中设置cookie，请执行以下操作：

$(function(){

var background = $.cookie('background') || false;

function changeBackground(background){
    if(background !== false){
        $('body').addClass(background);
        $.cookie('background', background);
    }
}

changeBackground(background);



$('body').on('change', '#settingBackground', function(){
    changeBackground($(this).val());
});


});

Answer 2

您可以按如下方式使用localStorage：

$(document).ready(function () {
  var selectedBG = localStorage.getItem("selectedBg");
  if (selectedBG) switchBg(selectedBG);
  $('#settingBackground').on('change', function () {
    localStorage.setItem("selectedBg", this.value);
    switchBg(this.value);
  });

  function switchBg(bg) {
    if (bg == "Default") {
        // Change background
        $('body').css("background", "#1e8cd4");
        $('body').css("color", "#fff");

    } else if (bg == "Background 2") {
        // Change background
        $('body').css("background", "url('http://i.imgur.com/cV7PKqh.jpg') no-repeat center center fixed");
        $('body').css("background-size", "cover");
        $('body').css("color", "#000");
    }
  }
});

Updated Fiddle

在使用之前确保localStorage存在。

提交时在本地保存表单更改

2 个答案: