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

Question

我有一个<select>我想用来更改网页背景的元素。我成功地改变了背景(尽管以一种相当不优雅的方式)，我想知道是否有一种简单的方法来“保存”它，以便每当用户离开并返回网页时，背景就是他们想要的选择了。

我正在修改 cookie 和 localStorage 来完成此任务，但没有任何效果。

<强> JSFiddle here

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

要从选择中设置 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());
});


});